拖动类的所有元素(jQueryUI可拖动）

dragging all elements of class when one is being dragged ( jQuery UI draggable )

本文关键字：拖动 jQueryUI 元素      更新时间：2023-09-26

我使用jQuery UI来允许类的元素。然而，我希望类的其余元素在拖动其中一个元素时能够跟随它们。我该怎么做？

因此，当一个被拖动时，类的其他部分也被拖动。

我试图在元素上触发mousedown on start和mouseup on stop事件，以便在拖动其中一个元素时对其他元素进行拖动？

$('.dismissAllButton').draggable({ axis:'x', containment:'parent', start:function(){ upEvent = false; $(this).mousedown(); }, drag: function(){ $(this).mousemove(); }, stop:function(){ $(this).mouseup(); setTimeout(function(){ upEvent = true; }, 1000); }});

我还试着让自己成为父母，这样当其中一个人被拖拽时，其他人也会被拖拽/跟随，但这没有奏效。

$('.dismissAllButton').draggable({ axis:'x', containment:'parent', handle:'.dismissAllButton', start:function(){ upEvent = false; }, stop:function(){ setTimeout(function(){ upEvent = true; }, 1000); }});

Fiddles:

没有以下内容，只拖动一个元素：http://jsfiddle.net/7ta68xyt/

尝试1，上面的代码示例1，：http://jsfiddle.net/7ta68xyt/1/

尝试2，上面的代码示例2，：http://jsfiddle.net/7ta68xyt/2/

更新：我在github上找到了一个允许这样做的脚本，但其他元素都落后了一点。我如何让它们每隔一段时间就滞后，并且在拖动停止时在同一位置结束，或者让它们都拖动相同（没有滞后）

这是小提琴：http://jsfiddle.net/7ta68xyt/3/

这是脚本：https://github.com/javadoug/jquery.drag-multiple

这里有一个使用jQuery ui的选项http://jsfiddle.net/7ta68xyt/5/

$(".dismissAllButton").draggable({
    axis: 'x',
    containment: 'parent',
    start: function (event, ui) {
        posTopArray = [];
        posLeftArray = [];
        if ($(this).hasClass("group")) {
            $(".group").each(function (i) {
                thiscsstop = $(this).css('top');
                if (thiscsstop == 'auto') thiscsstop = 0;     
                thiscssleft = $(this).css('left');
                if (thiscssleft == 'auto') thiscssleft = 0;     
                posTopArray[i] = parseInt(thiscsstop);
                posLeftArray[i] = parseInt(thiscssleft);
            });
        }
        begintop = $(this).offset().top;
        beginleft = $(this).offset().left;
    },
    drag: function (event, ui) {
        var topdiff = $(this).offset().top - begintop;
        var leftdiff = $(this).offset().left - beginleft;
        if ($(this).hasClass("group")) {
            $(".group").each(function (i) {
                $(this).css('top', posTopArray[i] + topdiff);
                $(this).css('left', posLeftArray[i] + leftdiff);
            });
        }
    }
});
相关文章：