Javascript 用拖放替换使用jquery ui的元素不会'；我不能正常工作_Javascript_Jquery_Jquery Ui

Javascript 用拖放替换使用jquery ui的元素不会'；我不能正常工作

javascript jquery jquery-ui

Javascript 用拖放替换使用jquery ui的元素不会'；我不能正常工作,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,使用最新的jQuery UI，在将元素从一个列表移动到另一个列表时，拖放功能无法正常工作。我想将元素从一个列表拖到另一个列表，并用另一个替换下垂的元素，问题是jqueryui替换了元素，但它将其移动到列表的底部，而不是将其保持在拖放的位置 <head> <style> #list1{ float:left; width: 200px; margin-right: 20px; } #l

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

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


#清单1{
浮动：左；
宽度：200px；
右边距：20px；
}
#清单2{
浮动：左；
宽度：200px；
}    
.要素1{
线高：25px；
宽度：200px；
边缘底部：5px；
边缘顶部：5px；
背景色：#ededed；
}
.要素2{
线高：25px；
宽度：200px；
边缘底部：5px；
边缘顶部：5px；
背景色：#黑色；
}  
.亮点{
边框：1px虚线#999999；
颜色：#333333；
高度：25px；
背景色：#faffd6；
}    
要素1
要素2
要素3
要素4
要素5
要素6
要素1
要素2
要素3
要素4
要素5
要素6
$（窗口）。加载（函数（）{
$（“#列表1”）。可排序({
回复：对，
占位符：“突出显示”，
});
$（“#列表2”）。可排序({
回复：对，
占位符：“突出显示”，
});
$（“.element1”）.draggable({
connectToSortable:“#列表2”，
回复：“无效”，
停止：功能（事件、用户界面）{
$（this）.替换为（'Element 99'）；
}
});
});

您遇到的问题是，您有两个不同的事件，并且只捕获其中一个

从灰色列表中拖动项目并将其放置在粉色列表中，高亮显示元素，然后将其放置。这是您有问题的用法

将项目从灰色列表中渐变并将其放置在粉色列表中，将显示高亮显示的元素，然后将拖动的元素移出该列表（新列表项目的边距仍然存在，但高亮显示的元素不存在），然后将其丢弃。这种情况很好

您的问题是，在第一个场景中，拖动的元素位置（DOM方向）是列表中的最后一个元素，当您放下它时，所发生的是，您让动画将其放置在正确的位置（高亮显示元素所在的位置），然后有一个开关。如果您更改了，那么应该在这些元素之间更改的函数将不知道要切换哪些元素

解决此问题的方法是转到“droppable”元素—您将项目放入其中的列表。在元素被放置到正确的位置后，使用可排序的（

#list2

）的

停用事件来运行任何您想要的
$("#list2").sortable({
    revert: true,
    placeholder: "highlight",
    deactivate: function(event, ui) {
        $(ui.item).replaceWith('<div class="element1">Element 99</div>');
    }
});

$（“#列表2”）。可排序({
回复：对，
占位符：“突出显示”，
停用：功能（事件、用户界面）{
$（ui.item）.替换为（'Element 99'）；
}
});

注意event.toElement
和notthis
的用法，因为当前范围中的this
是列表元素，而不是拖动的元素。不要忘记从可拖动元素中删除stop
事件的代码。
使用toElement的问题在于它在internet Explorer上不起作用。您是正确的。从toElement更改为使用ui.item
，这是我们删除的当前项。