Question

我有两个列表一个包含strengh而另一个有机会，我将项目从强度拖放到机会，现在我想从列表中删除已删除的项目，但它不是从列表中删除项目，而是将其删除从原始列表中，有人可以帮助我如何从列表中删除已删除的项目，这是我的代码

<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 });

不再有效。如果您将第一个列表中的项目拖放到彼此之上，它们将会自行删除。

而是使用它：

$( "#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();}}

它将阻止左侧列表自行删除。（一点点黑客，必须有一个更好的方法，不依赖于事件为空）。

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>

Jquery从删除列表中删除项目

2 个答案: