jquery從刪除列表中刪除項目

我有兩個列表中的一個包含強度和另一個有機會，我從力量拖放項目到機會，現在我想從列表中刪除掉項目，但它不從項目中刪除項目列表，而不是它的充分利用原單列表中移除，有人可以幫助我如何從列表中刪除被丟棄的物品，這裏是我的代碼jquery從刪除列表中刪除項目

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

來源

2011-06-23 lucy

這是不工作的原因是因爲當你在刪除該項目右邊的清單實際上是在新的清單中：

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

不再有效。如果您將第一個列表中的項目拖放到另一個列表中，它們將工作，他們只是刪除自己。

而是使用此：

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

或根據您的編碼風格：

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

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

如果在此添加：

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

將被停止在左側列表能夠刪除自己。（一點點的黑客，必須有一個更好的方式，不依賴於事件是空的）。

來源

2011-06-23 05:08:26

上面的例子不起作用，相反，它從強度列表中刪除項目，同時將其拖到機會。它應該做的是，當我從力量拖拽到機會時，它應該增加運行機會，當我從機會中拖出相同的項目時，它應該從機會列表中刪除，但強度保持不變。 – lucy

爲什麼不放在刪除按鈕上？這更有意義。否則，你必須使第二個列表成爲可拖動的，但只允許強度項目是可拖動的。這將是非常複雜的。 –

是的，但客戶不希望這樣，而是當他們從項目中拖動項目，他們想要刪除它。之間我加了你張貼的代碼，它現在也不工作。 – lucy

這是問題的答案，我一些如何設法從刪除列表中刪除項目。所有你需要做的就是調用這個函數$（「＃strength」）。droppable（{drop：fn}）;這個inturn調用了「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>

來源

2011-06-27 07:36:37 lucy

jquery從刪除列表中刪除項目

回答

相關問題