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

Posted 2023-05-08

【中文标题】jquery 可拖动 + 可在放置事件时使用自定义 html 排序？

【英文标题】：jquery draggable +sortable with custom html on drop event?

【发布时间】：2012-01-19 17:06:49

【问题描述】：

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

【问题讨论】：

请编辑您的问题。很抱歉，但我不明白您打算做什么以及您期望什么。你想改变什么？

【参考方案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(''));
        
    );
);

【参考方案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。

【讨论】：

嗨，不是这个var helpersArr = ['<input type="text" />', '<input type="file" />', '<input type="submit" value="Save" />'];，你能分享如何从服务器/ajax 加载它，即使填充的项目动态化吗？

【参考方案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');         
        
    

);

【讨论】：

这是我正在寻找的，除了我想从服务器/数据库加载 html。你能分享一下 Ajax，你是如何避免擦洗和追加的。

【参考方案4】：

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

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

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

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

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