将几个jqueryui元素相互绑定

binding several jquery ui elements to each other

本文关键字：元素 绑定 jqueryui 几个      更新时间：2023-09-26

是否可以设置一组由多个jquery ui元素组成的组，以便所有元素都响应与组中任何一个元素的交互？

编辑：例如，我有几个版本的非常相似的图像，我用jquery.tabs（）将它们分组到不同的页面中。这些图像都可以通过各种jquery-ui操作（可拖动、可调整大小等）。除了图像的路径外，我的所有选项卡看起来都应该相同。因此，当我在一个选项卡中拖动或调整图像大小时，我希望其他选项卡中的相应图像也能这样做。

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

示例：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
        });
    }
});

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

但如果要在拖动element2时拖动element1：由于在拖动过程中，元素得到一类ui可拖动拖动使用：

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

让我们假设类似的元素有一个共同的类名，例如`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(...);
});

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

相关文章：