0

I want to:

  • Make the draggable element drop in a container.
  • Change the elements html when dropped.
  • When the dropped element is dragged outside the container, revert to the original position and also revert to old html.

My current problems

  • While the draggable element is hovering the container, it already changes its style.
  • I can't understand how can I achieve 'dropped element revert to original position' (point 3 @ "I want to")

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

2 回答 2

1

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

工作示例

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

    });
});
于 2013-09-25T17:21:03.413 回答
0

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

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

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

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

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

于 2013-09-25T15:30:21.907 回答