Question

我目前正在尝试在jQuery UI中为时间轴类型功能构建可拖动的项目集合。我已经尝试了很多东西，使用我在下面的jsFiddle（http://jsfiddle.net/cyVYq/）中的当前示例，但是我的尝试都没有给我我想要的结果。

<div style="width: 99%; overflow: auto;position:absolute;">

        <div class="TimelineContainer">
            <div class="Task">
                <div id="coords"></div>
            </div>
            <div class="Event">
            </div>
            <div class="Resource">
            </div>
        </div>

</div>

理想情况下，当我拖动集合时，我想保持所有子div之间的间距，以便它们在拖动时同时作为一个组移动。目前我只能实现它们独立移动，但实际上这些项目是连在一起的。

然而，可能还需要将子对象拉到父div的开头。这些选项中的任何一个都可以吗？

任何帮助表示赞赏！

干杯

Answer 1

您希望拖动时所有三个项目都作为一个组移动，但可以在代码中的其他位置更改各个X值。

以下内容会在拖动任何项目时更新旧项目。拖动开始时，每个项目都保存起始点。当调用拖动事件时，一个项目的更改将应用于其他两个项目。

var $elements = [$('.Task'), $('.Event'), $('.Resource')];

$(".Task, .Event, .Resource").draggable({
    axis: "x",
    containment: "parent",
    start: function (ev, ui) {
        var $elem
        for (var i in $elements) {
            $elem = $elements[i];
            if ($elem[0] != this) {
                $elem.data('dragStart', $elem.offset());
            }
        }
    },
    drag: function (ev, ui) {
        var xPos, $elem,
        deltaX = ui.position.left - ui.originalPosition.left;
        for (var i in $elements) {
            $elem = $elements[i];
            if ($elem[0] != this) {
                $elem.offset({
                    top: $elem.data('dragStart').top,
                    left: Math.max($elem.data('dragStart').left + deltaX, 8)
                });

            }
        }
    }
})

jsFiddle

您可以轻松地使项目独立，然后通过填充和清除$elements数组来重新链接它们。

function unlink() {
   $elements = []; 
};

function link() {
   $elements = [$('.Task'), $('.Event'), $('.Resource')];
};

Answer 2

也许这就是你想要的？

$(document).ready(function () {
$(".TimelineContainer").draggable({
   axis: "x",
drag: function () {
         var offset = $(this).offset();
         var xPos = offset.left;
         var yPos = offset.top;
   }  
})
});

而不是移动孩子。

jQuery UI可拖动集合：同时拖动元素

2 个答案:

jsFiddle