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

Question

使用最新的jQuery UI，将元素从一个列表移动到另一个列表时，拖放功能无法正常工作。 我想将元素从一个列表拖到另一个列表中，然后将下垂的元素替换为另一个列表，问题是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方向上）是列表的最后一个元素，当您将其拖放时，会发生的事情是使动画将其放置在正确的位置（其中高亮元素是地方），然后有一个开关。 如果更改该功能，则应在这些元素之间更改的功能将不知道要切换哪个元素。

解决此问题的方法是转到“可放置”元素-您将项目放入其中的列表。使用sortable （ #list2 ）的deactivate事件在元素放置在正确位置后运行所需的任何内容。

$("#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 个解决方案

解决方案1
0 已采纳 2015-07-14 23:54:34

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-07-14 23:54:34

解决方案1
0 已采纳 2015-07-14 23:54:34