Question

我想：

使可拖动元素放入容器中。
删除时更改元素html。
当被删除的元素被拖到容器外部时，恢复到原始位置并恢复为旧的html。

我目前的问题

当可拖动元素悬停在容器上时，它已经改变了它的样式。
我无法理解如何实现'掉落元素恢复到原始位置'（第3点@“我想要”）

的jsfiddle

HTML

<div class="draggable-items">
    <div class="main-groups">Item 1</div>
    <div class="main-groups">Item 2</div>
    <div class="main-groups">Item 3</div>
    <div class="main-groups">Item 4</div>
</div>
<div id="container"></div>

的jQuery

$(function() {
    $( ".main-groups" ).draggable({
        connectToSortable: "#container",
        helper: "original",
        revert: "invalid"
    });

    $( "#container" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('.main-groups').each(function() {
                html.push('<div class="main-groups"><b><a href="#'+$(this).attr("id")+'">'+$(this).html()+'</a></b></div>');
            });
            $(this).find('.main-groups').replaceWith(html.join(''));
        }
    });
});

Answer 1

您可以更轻松地使用连接的可排序列表，如下所示：

<强> Working Example

$(function () {
    $(".draggable-items").sortable({
        connectWith: "#container",
        tolerance: "pointer",
        over: function (event, ui) {
            $('.ui-sortable-helper').outerWidth($(".draggable-items").innerWidth()).css('background', '#333');
        }
    });

    $("#container").sortable({
        connectWith: ".draggable-items",
        tolerance: "pointer",
        over: function (event, ui) {
            $('.ui-sortable-helper').outerWidth($("#container").innerWidth()).css('background', 'blue');
        }

    });
});

Answer 2

显示当悬停在容器上时，并且因为它设置为100％，它会更改宽度以适合容器。

要修复它，我将其修改为：

$( ".main-groups" ).draggable({
     connectToSortable: "#accordion2",
     helper: "original",
     revert: "invalid",
     start : function(event, ui) {
         ui.helper.width($(this).width());
     } 
});

在悬停容器时，这不会让可拖动项目改变其宽度。它落在它上面时会改变它的宽度。

但我仍然没有设法弄清楚如何将容器中的掉落元素移除到原始占位符。

jQuery - 可拖动的项目html样式bug +恢复到原始容器

我想：

我目前的问题

的jsfiddle

2 个答案: