Question

是否可以设置一组多个jquery ui元素来响应与组中任何一个的交互？

修改的例如，我有几个非常相似的图像版本，我用jquery.tabs（）将它们分成不同的页面。这些图像都可以用各种jquery ui东西（可拖动，可调整大小等）进行操作。除了图像的路径之外，我的所有选项卡看起来都应该相同。因此，当我在一个标签中拖动或调整图像大小时，我希望其他标签中的相应图像也可以这样做。

Answer 1

使用例如：$('#element1').add($('#element2).draggable();

但是如果要在拖动element2时拖动element1：因为在拖动过程中元素会获得一个ui-draggable-dragging类：

if($('#element1')).hasClass('ui-draggable-dragging')){
  //drag #element2
}

Answer 2

您可以通过使用UI对象提供的事件（例如drag draggable()来完成您想要做的事情：

示例： http://jsfiddle.net/elclanrs/WcNNb/2/

$('#drag1').draggable();
$('#drag2').draggable({
    drag: function(){
        $('#drag1').offset({
            top: $(this).offset().top,
            left: $(this).offset().left - $('#drag1').width() - 20
        });
    }
});

Answer 3

让我们假设类似的元素有一个共同的类名，例如`class =“elementType_n”。

然后你可以选择所有相似的元素并按顺序对它们进行操作，如下所示：

的javascript：

$selection_n = $(".elementType_n");
$selection_n.on('eventType', function(){
    //Here, depending on the action, either
    //* act on $selection_n all together, eg. $selection_n.methodA(...)..methodB(...);
    // or
    //* act on $(this) with eg. $(this).methodA(...)..methodB(...); then use $(this)'s resulting properties to act on the rest of the selection, eg. $selection_n.not($(this).methodA(...)..methodB(...);
});

对于draggables，没有必要拖动隐藏的元素来同情可见的拖动元素。谁会看到他们搬家？相反，建立一个 drag.oncomplete 处理程序来设置不可见的偏移量以匹配拖动元素的偏移量。最终结果 - 相同。效率 - 更高。（Droppable是另一回事）。

将几个jquery ui元素绑定到彼此

3 个答案: