是否有可能將兩個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') 
        }); 
       } 
      });  
  });