jquery 可拖动 + 可在放置事件时使用自定义 html 排序？

Question

在可放置区域放置元素时更改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

查看这个 DEMO 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"> 元素。 即使不是可放置小部件的drop 事件中最聪明的方法，我也会检查变量的值以识别移动元素的来源。 （它是来自可排序列表还是来自我的一个可拖动对象？） 如果它确实来自其中一个可拖动对象，我会将它的 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 是静态的。但是，假设您为每个可拖动对象都有一个自定义帮助程序，这应该成为您的新 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 中拖动，该 div 包含具有表单元素名称和 id 的其他 div，这些 div 拖放到右侧的一个可排序的 div 中，该 div 将成为一个 web 表单。因为我需要右边的 div 与表单的内容非常相似而没有额外的标记，所以使用无序列表是不可能的，除非我想在进入数据库的过程中进行一堆“清理”。不用了，谢谢。在我的示例中，当我从左侧列表中拖动时，我必须使用被拖动元素的 id 通过 ajax 查找一些东西，然后将标签、表单元素和验证放入列表中根据该ajax的结果离开。为了清楚起见，我从示例中删除了 ajax。

因此，从本质上讲，您正在使用两个并排的 div，通过列表连接进行可拖动和可排序。关键是您必须使用 Sortable 中的回调函数。只有在将新元素添加到可排序列表时才会触发“接收”回调。这很重要，因为您必须进行区分，这样您的更改也不会在排序时发生。但是，您不能单独使用“接收”，因为如果您尝试在该回调中操作 html，您将影响您从中拖动的列表，而不是您拖动到的列表。为了跟踪它是列表添加还是拖动，我将 $.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

查看有关 sortable 的文档。您可以使用 ui 元素来更改拖放对象的 html

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

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

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

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