jquery draggable +可以在drop事件上使用自定义html进行排序？

在droppable区域中放置元素时更改html。

像这样的东西： http ： //the-stickman.com/files/jquery/draggable-sortable.html

但是当我放置元素更改放置html。

其他示例：我有2个列表第一个可拖动列表和第二个可放置列表，当我从第一个列表拖动元素并将此元素放入第二个列表时，该元素将被克隆到第二个列表

拖动：

test 

下降：

 test 

我想将此html更改为

拖动：

 test 

下降：

 
test 

Answer 1

查看此演示http://jsfiddle.net/yeyene/7fEQs/8/

您可以根据需要自定义已删除的元素。

 $(function() { $( "#draggable li" ).draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid" }); $( "#sortable" ).sortable({ revert: true, receive: function(event, ui) { var html = []; $(this).find('li').each(function() { html.push('
'+$(this).html()+'
'); }); $(this).find('li').replaceWith(html.join('')); } }); }); 

Answer 2

这是一个非常基本的例子，但应适用于几种不同的情况。 我使用了jQuery UI Draggable + Sortable示例，除了.sortable()小部件之外，我将.droppable()小部件绑定到

元素。 尽管不是droppable小部件的drop事件中最聪明的方法，但我检查变量的值以识别移动元素的来源。 （它是来自可排序列表还是来自我的一个可拖动的？）如果它确实来自其中一个可拖动的我将它的HTML更改为我想要的。 否则它保持不变（因为你只是重新安排了可排序的顺序）

HTML

 
 
Drag me down
 
 
 
 
 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
Item 5
  

JS

 $(function () { var origin = 'sortable'; $("#sortable").droppable({ drop: function (event, ui) { if (origin === 'draggable') { ui.draggable.html('Look at this new fancy HTML!'); console.log(ui.draggable); origin = 'sortable'; } } }).sortable({ revert: true }); $("#draggable").draggable({ connectToSortable: "#sortable", helper: "clone", revert: "invalid", start: function () { origin = 'draggable'; } }); }); 

jsfiddle用于演示

相当无聊的例子，因为新的HTML是静态的。 但是，假设您为每个draggable都有一个自定义助手，这应该成为您的新HTML。 因此，例如，您已经在数组中存储了一些HTML片段，并选择了适合索引的匹配条目或者是什么。 这可能看起来像这样：

 var helpersArr = ['', '', '']; var helper; //draggable helper: function () { helper = helpersArr[$(this).index()]; return helper; } //dropppable drop function ui.draggable.html(helper); 

jsfiddle第二个例子

很确定你也可以通过避免使用辅助变量并使用ui.helper来实现相同的结果，但我无法弄清楚如何获取它的HTML部分。 如果这不符合您的需要，请告知我。 总而言之，我认为你可以使用我的例子作为改变被删除元素的HTML的不同目标的开始。

Answer 3

我有一个类似的问题需要更精细的结果。 我的系统是从左边的一个div拖动，其中包含带有表单元素名称和id的其他div，它们放在右边的可排序div中，成为webform。 因为我需要权利上的div非常类似于没有额外标记的表单内容，所以使用无序列表是不可能的，除非我想在进入数据库的路上做一堆“擦洗”。 不用了，谢谢。 在我的示例中，当我从左侧列表中拖动时，我必须使用拖动元素的id通过ajax查找许多内容，然后将标签，表单元素和validation放入列表中根据ajax的结果离开。 为了清楚起见，我从我的例子中删除了ajax。

所以，从本质上讲，你是采用两个并排的div，使用列表连接进行可拖动和可排序。 关键是您必须使用Sortable中的回调函数。 仅当将新元素添加到可排序列表时，才会触发“接收”回调。 这很重要，因为您必须区分，因此您的更改也不会在排序中发生。 你不能单独使用“接收”，因为如果你试图操纵该回调中的html，你将影响你拖动的列表，而不是你拖动TO的列表。 为了跟踪它是列表添加还是拖动，我将$ .data中的一个名为“newlement”的变量设置为1，如果它的列表添加，我然后检查更新回调以查看是否应该影响拖动的html或不。 就我而言，我不想对被拖动的元素做任何事情。

那么，HTML：

 
 
First Name
 
Last Name
 
 
  

和jQuery：

 $( ".master_list div" ).draggable({ connectToSortable: "#webform_container", helper: "clone", revert: "invalid" }); $( "#webform_container" ).sortable({ revert: true, cursor: 'pointer', placeholder: "placeholderdiv", connectWith: '.master_list', start: function() { /* Clear the value of newelement at start */ $(this).data('newelement', 0); }, receive: function(event, ui) { /* Get id from function and pass to the update to do stuff with */ $(this).data('id', ui.item[0].id); /* Set value of newelement to 1 only when new element is added to list */ $(this).data('newelement', 1); }, update: function(event, ui) { /* If newelement ==1, this is a new element to the list, transform it */ if ($(this).data('newelement') == 1) { var fieldname = ui.item.text(); ui.item.html('your new html here'); } } 

}）;

Answer 4

查看有关可排序的文档。 您可以使用ui元素更改已删除对象的html

http://jqueryui.com/demos/sortable/#event-update

您还可以在此处查看已连接列表的示例以及触发的事件

http://jqueryui.com/demos/sortable/#connect-lists

您可以在更新事件中更改元素的html。