jquery可拖动+；是否可以在删除事件时使用自定义html进行排序？

在可拖放区域中拖放元素时更改html

大概是这样的：

但当我删除元素时，会更改放置的html

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

拖动：

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

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

删除：

我想将此html更改为

拖动：

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

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

删除：

---

查看排序表上的文档。您可以使用ui元素更改被删除对象的html

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

---

更新事件是您更改元素html的地方。

我遇到了一个类似的问题，需要更详细的结果。我的系统从左侧的一个div中拖拽出来，该div包含其他具有表单元素名称和id的div，该div被放到右侧的一个可排序div中，该div将成为一个webform。因为我需要右边的div与表单的内容非常相似，而不需要额外的标记，所以使用无序列表是不可能的，除非我想在进入数据库的过程中进行大量的“清理”。不用了，谢谢。在我的示例中，当我从左侧的列表中拖动时，我必须使用被拖动元素的id通过ajax查找大量内容，然后根据ajax的结果将标签、表单元素和验证放入左侧的列表中。为了清晰起见，我从示例中删除了ajax

所以，本质上，您需要两个并排的div，使用列表连接执行draggable和sortable。关键是排序表中有一些回调函数，您必须使用它们。只有在将新元素添加到可排序列表时，“Receive”回调才会触发。这一点很重要，因为您必须进行区分，以便您的更改不会在排序时发生。但是，您不能单独使用“receive”，因为如果您尝试在该回调中操作html，您将影响从中拖动的列表，而不是要拖动到的列表。为了跟踪它是列表添加还是拖动，如果它是列表添加，我在$.data中将一个名为“NewElement”的变量设置为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>

---

}))

这是一个非常基本的示例，但应适用于几种不同的情况。 我举了这个例子，除了

.sortable（）

小部件之外，我还将

.droppable（）

小部件绑定到

元素。 即使在可拖放小部件的

drop

事件中不是最聪明的方法，我也会检查变量的值以识别移动元素的来源。（它是来自可排序列表还是来自我的一个拖拽列表？） 如果它确实来自其中一个draggable，我会将它的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>

将我向下拖动








第1项
第2项
第3项
第4项
第5项

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';
         }
     });

 });

$（函数（）{
变量来源='可排序'；
$（“#可排序”）.可拖放({
drop：函数（事件、用户界面）{
如果（原点===“可拖动”）{
html（'看看这个新奇的html！'）；
console.log（ui.draggable）；
来源='可排序'；
}
}
}).可排序({
回复：真
});
$（“#可拖动”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”，
开始：函数（）{
原点=‘可拖动’；
}
});
});

这是一个很无聊的例子，因为新的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);

var-helpersArr=[''，''；
辅助变量；
//拖拉的
助手：函数（）{
helper=helpersArr[$（this.index（））；
返回助手；
}
//可丢弃的丢弃函数
html（helper）；

可以肯定的是，您也可以通过避免helper变量而使用

ui.helper

来实现相同的结果，但我不知道如何获取它的HTML部分。 如果这不起作用，你需要它，就告诉我。总的来说，我认为您可以使用我的示例作为不同目标的开始，这些目标与更改被删除元素的HTML有关。

查看此演示

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

$(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(''));
        }
    });
});

$（函数（）{
美元（“#可拖动li”）。可拖动({
connectToSortable:“#可排序”，
助手：“克隆”，
回复：“无效”
});
$（“#可排序”）。可排序({
回复：对，
接收：功能（事件、用户界面）{
var html=[]；
$（this）.find（'li'）.each（function（）{
html.push（“”+$（this.html（）+“”）；
});
$（this.find（'li'）.replaceWith（html.join（“”））；
}
});
});

请编辑您的问题。很抱歉，我不明白你打算做什么，你期望什么。您想更改什么？这是我正在寻找的，只是我想从服务器/db加载html。你能分享一下Ajax吗

$(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(''));
        }
    });
});