是否有可能将两个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

您将不得不明确设置这两个元素的Y轴。

为此，无论是在这两个元素的事件处理函数中，您将必须设置Y轴或绑定两个元素具有相同的功能。

快乐编码。

Answer 4

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

我发现UI可拖动的扩展（）。它的工作原理相同的方式为“alsoResize”的UI调整大小（），即

​​

添加插件代码主要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 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') 
        }); 
       } 
      });  
  });