是否可以将两个 jquery.ui 可拖动链接在一起？

Question

我有两个 jquery.ui 可拖动对象。我将它们的运动限制在 y 轴上。如果一个被拖到某个 y 位置，我希望另一个自动移动到相同的 y 位置，反之亦然。以前有没有人将这两个链接在一起？

Answer 1

更新：脚本和演示已更新，因此在拖动时不再局限于 y 轴。

此脚本查找类“组”，后跟一个数字来拖放这些组合对象。我发了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));
        }
    });
});

Answer 2

我以前没有这样做过，但我建议使用drag 事件来调整相应其他元素的位置：

$('.selector').draggable({
    ...,
    drag: function(event, ui) {

    },
    ...
});

ui 对象将包含可用于手动重新定位其他元素的信息（在属性 ui.offset 中）。

Answer 3

https://forum.jquery.com/topic/dragging-a-group-of-items-alsodrag-like-alsoresize

我找到了 UI draggable() 的扩展。它的工作方式与 UI resizable() 的“alsoResize”相同，即

$('.selector').draggable({ alsoDrag: '.selected' });

在 jquery-ui 主库之后添加插件代码。

$.ui.plugin.add( 'draggable', 'alsoDrag', {
    start: function() {
        var that = $(this).data("ui-draggable"),
            o = that.options,
            _store = function (exp) {
                $(exp).each(function() {
                    var el = $(this);
                    el.data("ui-draggable-alsoDrag", {
                        top:  parseInt(el.css("top"), 10),
                        left: parseInt(el.css("left"), 10)
                    });
                });
            };

        if (typeof(o.alsoDrag) === "object" && !o.alsoDrag.parentNode) {
            if (o.alsoDrag.length) { o.alsoDrag = o.alsoDrag[0]; _store(o.alsoDrag); }
            else { $.each(o.alsoDrag, function (exp) { _store(exp); }); }
        }else{
            _store(o.alsoDrag);
        }
    },
    drag: function () {
        var that = $(this).data("ui-draggable"),
            o = that.options,
            os = that.originalSize,
            op = that.originalPosition,
            delta = {
                top: (that.position.top - op.top) || 0,
                left: (that.position.left - op.left) || 0
            },

            _alsoDrag = function (exp, c) {
                $(exp).each(function() {
                    var el = $(this), start = $(this).data("ui-draggable-alsoDrag"), style = {},
                        css = ["top", "left"];

                    $.each(css, function (i, prop) {
                        var sum = (start[prop]||0) + (delta[prop]||0);
                        style[prop] = sum || null;
                    });

                    el.css(style);
                });
            };

        if (typeof(o.alsoDrag) === "object" && !o.alsoDrag.nodeType) {
            $.each(o.alsoDrag, function (exp, c) { _alsoDrag(exp, c); });
        }else{
            _alsoDrag(o.alsoDrag);
        }
    },
    stop: function() {
        $(this).removeData("draggable-alsoDrag");
    }
});

Answer 4

您必须明确设置两个元素的 Y 轴。

为此，您必须在两个元素的事件处理函数中设置 Y 轴或将两个元素绑定到相同的函数。

编码愉快。

Answer 5

这是标记答案中提到的代码的简化版本（对于像我这样的傻瓜）：

• 在 HTML 中

  <div id="div1" class="group">...</div>
  <div id="div2"class="group">...</div>
  

• 在脚本标签中

  $(document).ready(function(){ 
      //to get the group 
      var getGroup = function() {
          return $(".group");
      }; // add drag functionality
  
      $(".group").draggable({
          revertDuration: 10,
          // grouped items animate separately, so leave this number low
          containment: "window",
          scroll: false,
          stop: function(e, ui) {
              getGroup(ui).css({
                  'top': ui.helper.css('top'),
              });
          },
          drag: function(e, ui) {
              getGroup(ui).css({
                  'top': ui.helper.css('top'),
                  'left': ui.helper.css('left')
              });
          }
      });     
  });