Question

在这个示例中，我试图重新排列列表元素的顺序。我正在删除一个拖动的元素，然后在它的放置目标之后插入它。

由于某种原因，在插入元素X后，它不再可拖动。我想如果我只是在元素上调用draggable（）它会为我拖动但它不是。

我输错了什么？

这是我的代码：

<html>
<head>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>        
    <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>        
    <script language="javascript">


   $(document).ready(function() {

    var droppable_options = {
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        var x = ui.draggable
        var y = $(this)

        x.remove()
        x.insertAfter (y)
        x.draggable( { revert: true })
      }
    } 


    $("li").draggable( { revert: true } )
    $("li").droppable( droppable_options )
}); 

    </script>

    <style>
        .ui-state-hover { border : 1px solid red }
    </style>

</head>
<body>

    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>

</body>

Answer 1

你只需要拿出

x.remove();
x.draggable( { revert: true });

你的代码就可以了。

您的代码将变为

var droppable_options = {
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        var x = ui.draggable
        var y = $(this)

        //x.remove()
        x.insertAfter (y)
        //x.draggable( { revert: true })
      }
    } 
$("li").draggable( { revert: true } )
$("li").droppable( droppable_options )

插入的元素不可拖动

1 个答案: