jquery ui sortable - How to disable sortable if it is triggered?

Question

Hi I'm new to jquery and I'm not a programer either.
I've tried searching for the answer on google but I just couldn't find the answer.
Here is my quetion, i have a list of items to sort only after I click the button "sort". And the list of items should not be able to be sorted atfer I click the the button "confirm".
My script just doesn't work. Can anyone help please?

ben

<!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>

return1.at · Accepted Answer · 2009-09-09 12:21:39Z

6

use another function to disable the sorter:

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

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

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

answered Sep 9, 2009 at 12:21

return1.at

3,1503 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ben Over a year ago

i found the button "sort" can only be execute once, after the buttun "confirm" is clicked, the button "sort" is not functionable any more so i add a code in function "sort" and its working fun now :) <pre><code> $(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); }); </code></pre>

Collectives™ on Stack Overflow

jquery ui sortable - How to disable sortable if it is triggered?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related