jquery ui sortable - 如果被触发，如何禁用可排序？答案

【问题标题】：jquery ui sortable - How to disable sortable if it is triggered?jquery ui sortable - 如果被触发，如何禁用可排序？
【发布时间】：2010-11-26 19:46:57
【问题描述】：

嗨，我是 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>

【问题讨论】：

标签： jquery user-interface jquery-ui-sortable

【解决方案1】：

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

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

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

   $('#sort').bind('click',sort);
   $('#confirm').bind('click',reset);
});

【讨论】：

我发现按钮“排序”只能执行一次，点击按钮“确认”后，按钮“排序”不再起作用，所以我在函数“排序”中添加了一个代码现在它的工作乐趣:)

 $(document).ready(function(){ function sort(){ $("#sortable").sortable('enable'); $("#sortable" ).sortable({ placeholder: 'ui-state-highlight' }); } function reset(){ $("#sortable").sortable('disable'); } $('#sort').bind(' click',sort); $('#confirm').bind('click',reset); });