jQuery Draggable +排序与自定义html放事件? [英] jquery draggable +sortable with custom html on drop event?

问题描述

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

Change html when drop element in droppable area.

类似这样的内容: http://the-stickman.com/files /jquery/draggable-sortable.html

但是当我删除元素更改时，放置了html.

But when I drop element change placed html.

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

Other Example: I have 2 lists first draggable list and second droppable list, when i drag element from a first list and i drop this element into a second list, the element will be cloned to the second list

拖动:

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

放置:

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

我想将此html更改为

i want to change this html to

拖动:

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

放置:

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

推荐答案

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

您可以根据需要自定义放置的元素.

You can customize your dropped element as you wish.

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

这篇关于jQuery Draggable +排序与自定义html放事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！