Question

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

它运行正常，但是当我水平滚动时，掉落元素的位置不会改变。所以，可能我必须保持所有掉落元素的位置。有没有简单的方法来实现这一点，我的意思是与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;
            }
        });

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

jQuery拖放设置元素的位置

1 个答案: