jQuery UI drag drop swap elements -


i cant handle 1 thing - swap elements betweens 2 divs. here code

 $(function () {     $('#container').sortable({         tolerance: "pointer"     });      $('#box1').sortable({         tolerance: "pointer"     });     $('#box1').on("sortreceive", function (event, ui) {         var $list = $(this);          if ($list.children().length > 1) {             $(ui.sender).sortable('cancel');         }     });      $('#box2').sortable({         tolerance: "pointer"     });     $('#box2').on("sortreceive", function (event, ui) {         var $list = $(this);          if ($list.children().length > 1) {             $(ui.sender).sortable('cancel');         }     });     $('.item').sortable({         connectwith: '.item'     });     $("#container,#box1,#box2").disableselection(); }); 

my fiddle: http://jsfiddle.net/kehator/tsjgr/

i want change line:

    $(ui.sender).sortable('cancel'); 

it have swap elements,not cancel. , dont know how it. many scripts doesnt work..im hopeless.

try this:

                 <script>                         $(function() {                         $( "#sortable1, #sortable2" ).sortable({                         connectwith: ".connectedsortable"                         }).disableselection();                         });                         </script>                          <script>                          $(function() {                     $( "#sortable1" ).sortable({                       connectwith: ".connectedsortable",                         start: function(e,ui){                             ui.item.css('border-style', 'solid');                             ui.item.css('border-color', 'rgb(211, 211, 211)');                         },                         stop: function(e,ui){                             ui.item.css('border-style', 'solid');                             ui.item.css('border-color', 'rgb(252, 239, 161)');                             ui.item.css('background', 'url("images/ui-bg_glass_55_fbf9ee_1x400.png")');                             ui.item.css('background-repeat', 'repeat-x');                         }                     }).disableselection();                   });                          </script>                          <script>                          $(function() {                     $( "#sortable2" ).sortable({                       connectwith: ".connectedsortable",                         start: function(e,ui){                             ui.item.css('border-style', 'solid');                             ui.item.css('border-color', 'rgb(211, 211, 211)');                         },                         stop: function(e,ui){                             ui.item.css('border-style', 'solid');                             ui.item.css('border-color', 'rgb(211, 211, 211)');                             ui.item.css('background', 'url("images/ui-bg_glass_75_e6e6e6_1x400.png")');                             ui.item.css('background-repeat', 'repeat-x');                         }                     }).disableselection();                   });                          </script> 

Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -