Question

在droppable区域中删除元素时更改html。

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

但是当我把元素更改放到html。

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

拖动：

<a href="#">test</a>

降：

<a href="#">test</a>

我想将此html更改为

拖动：

<a href="#">test</a>

降：

<div class="toggle"><a href="#">test</a></div>

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('<div class="toggle">'+$(this).html()+'</div>');
            });
            $(this).find('li').replaceWith(html.join(''));
        }
    });
});

Answer 2

这是一个非常基本的例子，但应适用于几种不同的情况。我采用了jQuery UI Draggable + Sortable示例，除.sortable()小部件外，我将.droppable()小部件绑定到<ul id="sortable">元素。尽管不是droppable小部件drop事件中最聪明的方法，但我检查变量的值以识别移动元素的来源。（它来自可排序列表还是来自我的一个可拖动的？）如果它确实来自其中一个draggables我将它的HTML更改为我想要的。否则它保持不变（因为你只是重新安排了可排序的顺序）

<强> HTML

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<br />
<br />
<br />
<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<强> JS

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

 });

<强>

<强> jsfiddle for demonstration

相当无聊的例子，因为新的HTML是静态的。但是，假设您为每个draggable都有一个自定义帮助程序，这应该成为您的新HTML。因此你就是已经将一些HTML片段存储在一个数组中，并选择适合索引的匹配条目，或者选择哪种方式。这有点像：

var helpersArr = ['<input type="text" />', '<input type="file" />', '<input type="submit" value="Save" />'];
var helper;
//draggable
helper: function () {
    helper = helpersArr[$(this).index()];
    return helper;
}
//dropppable drop function
ui.draggable.html(helper);

<强>

<强> jsfiddle for second example

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

Answer 3

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

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

所以，HTML：

<div class='master_list'>
  <div id="2">First Name</div>
  <div id="3">Last Name</div>
</div>

<div id="webform_container">
</div>

和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的地方。

在拖放事件中使用自定义html进行jquery draggable + sortable？

4 个答案:

<强> jsfiddle for demonstration

<强> jsfiddle for second example