2

我目前正在尝试在 jQuery UI 中为 Timeline 类型功能构建可拖动的项目集合。我已经使用以下 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 的开头。这些选项中的任何一个都可能吗？

任何帮助表示赞赏！

干杯

4

1 回答 1

3

您希望所有三个项目在拖动时作为一个组移动，但可以在代码中的其他位置更改各个 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')];
};
于 2013-07-24T23:29:56.663 回答