插入的元素不能拖动

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

出于某种原因，插入元素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>

来源

2014-09-06 Padraig

你只需要拿出

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)

来源

2014-09-06 20:15:09

插入的元素不能拖动

回答

相关问题