我使用 jQuery UI 来允许类的元素。但是,我希望当其中一个元素被拖动时,类的其余元素也能跟随。我怎样才能做到这一点?
因此,当其中一个被拖动时,类的其余部分也会被拖动。
我试图在元素上的开始事件上触发 mousedown 并在停止事件上触发 mouseup ,以便在拖动其中一个元素时其他元素也会发生拖动?
$('.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); }});
fiddle :
无跟随,仅拖动一个元素:http://jsfiddle.net/7ta68xyt/
尝试 1,上面的代码示例 1,:http://jsfiddle.net/7ta68xyt/1/
尝试 2,上面的代码示例 2,:http://jsfiddle.net/7ta68xyt/2/
更新:我在 github 上找到了一个允许这样做的脚本,但其他元素都有点落后。如何让它们在拖动停止时每隔一段时间滞后并最终在同一位置,或者让它们全部拖动相同(无滞后)。
这是 fiddle :http://jsfiddle.net/7ta68xyt/3/
最佳答案
这是使用 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);
});
}
}
});
关于javascript - 当一个元素被拖动时,拖动类的所有元素(jQuery UI Draggable),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26663915/