是否可以将两个jquery.ui可拖动链接在一起？ [英] Is it possible to link two jquery.ui draggables together?

问题描述

我有两个jquery.ui draggables。我限制他们移动到y轴。如果将一个拖动到某个y位置，我希望另一个自动移动到相同的y位置，反之亦然。有没有人曾经将其中的两个联系在一起？

I have two jquery.ui draggables. I am constraining their movement to the y-axis. If one is dragged to a certain y-position, I want the other to automatically move to the same y-position and vice versa. Has anyone ever linked two of these together before?

推荐答案

已更新：脚本和演示已更新，因此它拖动时不再限制为y轴。

Updated: Script and demo updated so it is no longer restricted to the y-axis while dragging.

此脚本查找类group，后跟一个数字来拖放这些组合对象。我在这里发布了演示。

This script looks for the class "group" followed by a number to drag/drop these combined objects. I posted a demo here.

HTML

<div class="demo">
<div id="draggable">
 <p>Drag from here</p>
 <div class="dragme group1"><img src="image1.jpg"><br>Group 1</div>
 <div class="dragme group1"><img src="image2.jpg"><br>Group 1</div>
 <div class="dragme group2"><img src="image3.jpg"><br>Group 2</div>
 <div class="dragme group2"><img src="image4.jpg"><br>Group 2</div>
</div>
<div id="droppable">
 <p>Drop here</p>
</div>
</div>

脚本

$(document).ready(function() {
    // function to get matching groups (change '.group' and /group.../ inside the match to whatever class you want to use
    var getAll = function(t) {
        return $('.group' + t.helper.attr('class').match(/group([0-9]+)/)[1]).not(t);
    };
    // add drag functionality
    $(".dragme").draggable({
        revert: true,
        revertDuration: 10,
        // grouped items animate separately, so leave this number low
        containment: '.demo',
        stop: function(e, ui) {
            getAll(ui).css({
                'top': ui.helper.css('top'),
                'left': 0
            });
        },
        drag: function(e, ui) {
            getAll(ui).css({
                'top': ui.helper.css('top'),
                'left': ui.helper.css('left')
            });
        }
    });
    $("#droppable").droppable({
        drop: function(e, ui) {
            ui.draggable.appendTo($(this));
            getAll(ui).appendTo($(this));
        }
    });
});

这篇关于是否可以将两个jquery.ui可拖动链接在一起？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！