jQuery - 可拖动项 html 样式错误 + 恢复到原始容器答案

【问题标题】：jQuery - Draggable item html style bug + Revert to original containerjQuery - 可拖动项 html 样式错误 + 恢复到原始容器
【发布时间】：2013-09-25 13:37:54
【问题描述】：

我想：

使可拖动元素拖放到容器中。
拖放时更改元素 html。
当拖放的元素被拖到容器外时，恢复到原来的位置，也恢复到旧的 html。

我目前的问题

当可拖动元素悬停在容器上时，它已经改变了它的样式。
我不明白如何实现“删除的元素恢复到原始位置”（第 3 点@“我想”）

JSFiddle

http://jsfiddle.net/27Hqj/1/

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

【问题讨论】：

标签： jquery jquery-ui drag-and-drop

【解决方案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');
        }

    });
});

【讨论】：

【解决方案2】：

似乎当悬停在容器上时，因为它被设置为 100%，所以它改变了宽度以适应容器。

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

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

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

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

【讨论】：