與刪除

Question

項目和拖放排序我想gp_item應該是排序，當阻力和下gp_delete區域gp_item應該被刪除下降。

當我做了，它要麼工作排序或刪除。兩者不能一起工作。

<div id='container_gp'> 
<div id='1' class='gp_item'> Graph 1</div> 
<div id='2' class='gp_item'> Graph 2</div> 
<div id='3' class='gp_item'> Graph 3</div> 
</div> 

<div id='gp_delete'>Drop to delete here </div> 

我寫過這樣的。

$('.gp_item').draggable({ 
      revert: true, 
      proxy:'clone' 

     }); 

$("#gp_delete").droppable({ 
      activeClass: "active", 
      drop: function(event, ui) { 
       if(confirm("Are you sure you wish to delete")) 
       { 
        //delete code 
        ui.draggable.remove(); 
       } 
      } 
     }); 

Answer 1

我修改了一下你的代碼，現在的工作，關鍵是要設置draggable和sortable功能在容器上不是單一要素：

$('#container_gp').sortable({revert: 100}).draggable({ 
    revert: 'invalid', 
    proxy: 'clone' 
}).disableSelection() 

$("#gp_delete").droppable({ 
    activeClass: "active", 
    hoverClass: "ui-state-highlight", 
    accept: '#container_gp div', 
    drop: function (event, ui) { 
     if (confirm("Are you sure you wish to delete")) { 
      ui.draggable.remove(); 
     } 
    } 
}); 

工作小提琴：http://jsfiddle.net/ckWKE/2/