jQuery droppables – 在drop上更改元素

我对jQuery有点新鲜，希望有人可以帮助我。

我想在删除（li）之后将元素（li）更改为另一个元素（div）。

示例代码：

$("#inputEl>li").draggable({ revert: true, opacity: 0.4, helper: "clone" }); $("#dropEl") .droppable({ accept: ".drag", hoverClass: "dropElhover", drop: function(ev, ui) { // change the li element to div here } }); 

问题是，当我使用时

 drop: function(ev, ui) { $(ui.draggable).replaceWith("
Some content
"); } 

触发上述function时，将禁用原始可拖动元素。

我正在使用最新的jQuery和jQuery UI稳定版本。

Answer 1

那么，你想要的是保持你的原始列表完整并将列表项放入dropEl？ 这个怎么样：

 drop: function(ev,ui) { $(this).append("
Some content
"); } 

或者，如果你想用div元素替换list元素并且还有div元素可拖动，你可以试试这个：

 drop: function(ev, ui) { $(ui.draggable).replaceWith("
Some content
"); $("#inputEl>div").draggable({ revert: true, opacity: 0.4, helper: "clone" }); } 

原始的可拖动调用仅在调用时使项目可拖动。 如果更改或添加元素并希望它们可拖动，则需要再次调用draggable（）函数。

Answer 2

thanx回复。

你的第一个代码工作，而且我还可以像这样对droppable中的div进行排序：

  drop: function(ev, ui) { $(this).append("
Some content
"); $("#dropEl").sortable(); } 

现在问题是我如何知道哪个列表一旦我将其更改为div？

我使用以下代码来获取每个元素id：

 drop: function(ev, ui) { revert: true; var this_id = $(ui.draggable).attr("id"); $(this).append('
Some content
'); $("#dropEl").sortable(); }