Question

使用最新的jQuery UI，将元素从一个列表移动到另一个列表时，拖放功能无法正常工作。我想将元素从一个列表拖到另一个列表并用另一个列表替换drooped元素，问题是jquery UI替换了元素但是它将它移动到列表的底部，它没有将它保持在它的位置被放弃了。

    <head>
    <style>
    #list1{

        float:left;
        width: 200px;
        margin-right: 20px;
    }
    #list2{

        float:left;
        width: 200px;
    }    
    .element1{
        line-height:25px;
         width: 200px;
        margin-bottom:5px;
        margin-top:5px;
        background-color:#ededed;

    }
    .element2{
        line-height:25px;
         width: 200px;
        margin-bottom:5px;
        margin-top:5px;
        background-color:#ffeded;

    }  
    .highlight{
        border: 1px dashed #999999;
        color: #333333;
        height: 25px;
        background-color: #faffd6;

    }    
    </style>    
    </head>
    <body class="">

    <div id="wrapper">
       <div id="list1">
       <div class="element1">Element 1</div>
       <div class="element1">Element 2</div> 
       <div class="element1">Element 3</div>    
       <div class="element1">Element 4</div>    
       <div class="element1">Element 5</div>    
       <div class="element1">Element 6</div>    
       </div>   

       <div id="list2">
       <div class="element2">Element 1</div>
       <div class="element2">Element 2</div> 
       <div class="element2">Element 3</div>    
       <div class="element2">Element 4</div>    
       <div class="element2">Element 5</div>    
       <div class="element2">Element 6</div>    
       </div>   

    </div>
      <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

    <script>
    $(window).load(function () {


        $("#list1").sortable({
        revert: true,
         placeholder: "highlight",

        });

        $("#list2").sortable({
        revert: true,
         placeholder: "highlight",

        });



        $( ".element1" ).draggable({
          connectToSortable: "#list2",
          revert: "invalid",  
        stop: function( event, ui ) {

         $(this).replaceWith('<div class="element1">Element 99</div>');

        }
        });


    });    
    </script>

Answer 1

你遇到的问题是你有两个不同的事件而你只能抓住其中一个。

您从灰名单中拖动项目并将其放在粉红色列表中，您的突出显示元素会显示，然后您将其删除。这是有问题的用法。
您从灰色列表中选择项目并将其放在粉红色列表中，显示您的高亮元素，然后将您拖动的元素带到该列表之外（您仍然具有新列表项的边距，但是突出显示的元素不存在）然后放弃它。这种情况都很好。

你的问题是，在第一个场景中，拖动的元素位置（DOM-wise）是列表的最后一个元素，当你放弃它时，你会得到动画将它放在正确的位置（高亮元素是地方）然后有一个开关。如果你改变那些应该在这些元素之间改变的函数将不知道要切换哪些元素。

解决此问题的方法是转到“droppable”元素 - 您将项目放入的列表。使用deactivate（sortable）的#list2事件来运行任何你想要的东西元素被放置在正确的位置。

$("#list2").sortable({
    revert: true,
    placeholder: "highlight",
    deactivate: function(event, ui) {
        $(ui.item).replaceWith('<div class="element1">Element 99</div>');
    }
});

请注意event.toElement而不是this的使用情况，因为当前范围中的this是列表元素，而不是拖动的元素。不要忘记从可拖动元素中删除stop事件的代码。

使用拖放操作使用jquery ui替换元素无法正常工作

1 个答案: