Jqueryドロップされたリストからアイテムを削除する

Question

2つのリストには強度があり、もう1つは機会があり、アイテムをドラッグ＆ドロップすることで、ドロップされたアイテムをリストから削除することができました。リスト、代わりにはorginalリストから削除取得、誰かがリストから削除された項目を削除する方法を私を助けることができ、ここに私のコードは

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 
    rel="stylesheet" type="text/css" /> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery-ui.js"></script> 




<style> 
#strength, #opportunity { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; } 
#strength li, #opportunity li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } 
</style> 


<script> 
$(function() { 

    //$("#opportunity li").bind('click', fn); 


    var fn = function(event, ui) { 
      var self = $(this); 
      var itemID = ui.draggable.attr("id"); 

      if(itemID > 0){ 
       //$("#strength li").append($(ui.draggable[2]).removeAttr("style")); 
       //alert(document.getElementById(itemID).innerHTML); 
       var itemval; 
       $("#" + itemID).remove(); 

       //document.getElementById(itemID).style.display='none'; 
       //alert(self.id); 
      } 
     }; 


    $("#opportunity").sortable({ 
     revert: false 
    }); 


    $("#strength li").draggable({ 
     connectToSortable: "#opportunity", 
     helper: "clone", 
     revert: "invalid" 
    }); 

    $("#strength li").droppable({ drop: fn }); 

    $("ul, li").disableSelection(); 

}); 


</script> 




<div class="demo"> 

<ul id="strength"> 
    <li id="1" class="ui-state-highlight">Strength 1</li> 
    <li id="2" class="ui-state-highlight">Strength 2</li> 
    <li id="3" class="ui-state-highlight">Strength 3</li> 
    <li id="4" class="ui-state-highlight">Strength 4</li> 
</ul> 

<ul id="opportunity"> 
    <li id="0" class="ui-state-default">Opportunity 1</li> 
    <li id="0" class="ui-state-default">Opportunity 2</li> 
    <li id="0" class="ui-state-default">Opportunity 3</li> 
    <li id="0" class="ui-state-default">Opportunity 4</li> 
    <li id="0" class="ui-state-default">Opportunity 5</li> 
</ul> 

</div><!-- End demo --> 

Answer 1

あなたがにしてアイテムをドロップしたときので、これは働いていない理由は、右側のリストは実際には新しいリストにあります。

$("#strength li").droppable({ drop: fn }); 

もう動作しません。最初のリストのアイテムを上にドラッグすると機能しますが、削除するだけです。あなたがこの中に追加した場合

var fn2 = function(event, ui) { 
    $(this).remove(); 
}; 

$("#strength li").draggable({ 
    connectToSortable: "#opportunity", 
    helper: "clone", 
    revert: "invalid", 
    stop: fn2 
}); 

：

$("#strength li").draggable({ 
    connectToSortable: "#opportunity", 
    helper: "clone", 
    revert: "invalid", 
    stop: function(){$(this).remove();} 
}); 

またはあなたのコーディングスタイルごととして：

代わりにこれを使用

stop: function(event, ui){if(!event){$(this).remove();}} 

それがあることから、左側のリストを停止します自分自身を削除することができます。 （ハックのビット、イベントが空であることに依存しないよりよい方法が必要です）。

Answer 2

ここでは、私は削除されたリストから項目を削除する方法をいくつか質問への答えです。あなたがしなければならないことは、この関数を$（ "＃strength"）と呼ぶことです。droppable（{drop：fn}）;これは、 "fn"を呼び出します。

<script type="text/javascript" language="javascript"> 
    $(function() { 

     var fn = function (event, ui) { 
      var self = $(this); 
      var itemID = ui.draggable.attr("id"); 
      if (itemID > 0) { 
       var itemval = document.getElementById(itemID).innerHTML; 
       $("#" + itemID).remove(); 
       document.getElementById(itemID).style.display = 'none'; 
       $("#" + itemID).remove(); 

       var newitemtoadd; 
       newitemtoadd = '<li id="' + itemID + '" class="ui-state-highlight ui-draggable ui-droppable">' + itemval + '</li>'; 

       $("ul#strength").append(newitemtoadd); 
       $("#strength li").draggable({ 
        connectToSortable: "#opportunity", 
        helper: "clone", 
        revert: "invalid" 
       }); 
      } 
     }; 


     $("#opportunity").sortable({ 
      revert: false 
     }); 


     $("#strength li").draggable({ 
      connectToSortable: "#opportunity", 
      helper: "clone", 
      revert: "invalid" 
     }); 

     $("#strength").droppable({ drop: fn }); 

     $("ul, li").disableSelection(); 

    }); 


</script>