4

嗨，我是 jquery 的新手，我也不是程序员。
我试过在谷歌上搜索答案，但我找不到答案。
这是我的问题，只有在单击“排序”按钮后，我才有要排序的项目列表。并且在我单击“确认”按钮后，项目列表应该无法排序。
我的脚本不起作用。有人可以帮忙吗？


本 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>sortable test</title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");google.load("jqueryui", "1.7.1");</script>
    <style type="text/css">
      #sortable {
        list-style-type: none;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      #sortable li {
        padding: 5px;
        font-size: 1.2em;
        height: 1.5em;
        background:#ccc;
        border:1px #333 solid;
      }
      html>body #sortable li {
        height: 1.5em;
        line-height: 1.2em;
      }
      .ui-state-highlight {
        height: 1.5em;
        line-height: 1.2em;
        background:#ffcc33!important;
        border:1px #ff6600 solid!important;
      }
      .demo{
        width:200px;
        margin:0 auto;
      }
      .btn{
        background:#ffcc33;
        border:3px #ff6600 dashed;
        color:#FFF;
        cursor:pointer;
        margin:5px 0;
      }
   </style>
   <script type="text/javascript">
  $(document).ready(function(){
    function sort(){
      $("#sortable").sortable({
        placeholder: 'ui-state-highlight'
      });
      $("#sortable").disableSelection();
    }
    $('#sort').bind('click',sort);
    $('#confirm').bind('click',sort);
  });

   </script>   
  </head>
  <body>        
    <div class="demo">
      <div id="sort" class="btn">Sort</div>
      <div id="confirm" class="btn">Confirm</div>
      <ul id="sortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
        <li class="ui-state-default">Item 6</li>
        <li class="ui-state-default">Item 7</li>
      </ul>     
    </div>       
  </body>
</html>
4

1 回答 1

6

使用另一个函数来禁用排序器：

$(document).ready(function(){
   function sort(){
     $("#sortable").sortable({
       placeholder: 'ui-state-highlight'
     });
   }

   function reset(){
     $("#sortable").sortable('disable');
   }

   $('#sort').bind('click',sort);
   $('#confirm').bind('click',reset);
});
于 2009-09-09T12:21:39.867 回答