jquery - jQuery拖放设置元素的位置

Question

我想创建一个水平滚动的时间轴，可以在时间轴上拖动事件。为此，我创建了一个动态网格并使用了 jQuery ui 拖放。

它运行良好，但是当我水平滚动它时，放置元素的位置没有改变。所以，可能我必须保持所有丢弃的元素位置。有没有简单的方法来实现这一点，我的意思是使用 css 等。

    var dropBox;
    var drag;
    var maxEventsInMonth = 10;
    var maxDataRow = 6;

请参考。

http://jsfiddle.net/dipal/GSNrX/14/

Answer 1

您可以在 dragstart 上克隆元素并用克隆替换目标 HTML 并删除拖动的元素。所以你有图像，因为它本来就在网格内。

我刚刚从您的默认代码中制作了一个 jsfiddle ( http://jsfiddle.net/uDYEr/ ) 并注释掉了 handleDrop 函数，因为这会导致错误，我不想清理您的代码；-)

我主要做了以下几点：

添加两个新变量：

    var dragClone = false;
    var dragElement = false;

在开始时克隆元素：

        $('#drag li').draggable({
            revert: "invalid",
            cursor: "move",
            start : function() {
                dragClone = $(this).clone();
                dragElement = $(this);
            }
        });

然后附加dragClone到目标并删除dragElement：drop

        dropBox.droppable({
            accept: "#drag li",
            scroll: true,
            drop: function (event, ui) {
                $(this).html(dragClone);
                dragElement.remove();
              // handleDrop($(this), event, ui);
                return true;
            }
        });

希望这可以帮助。或者至少让你知道如何做到这一点。