jQuery UI 可拖动集合 : dragging elements simultaneously

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