Có thể liên kết hai jquery.ui với nhau không?

Question

Tôi có hai jquery.ui có thể kéo được. Tôi đang hạn chế chuyển động của chúng đến trục y. Nếu một được kéo đến một vị trí y nhất định, tôi muốn người kia tự động di chuyển đến cùng vị trí y và ngược lại. Có ai từng liên kết hai cái này với nhau trước đây không?

Answer 1

Đã cập nhật: Tập lệnh và bản demo được cập nhật để nó không còn bị giới hạn đối với trục y trong khi kéo.

Tập lệnh này tìm lớp "nhóm" theo sau là số để kéo/thả các đối tượng kết hợp này. Tôi đã đăng một số 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> 

Script

$(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

tôi đã không làm điều này trước đây, nhưng tôi khuyên bạn nên sử dụng sự kiện drag để điều chỉnh vị trí của phần tử khác tương ứng:

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

    }, 
    ... 
}); 

Đối tượng ui sẽ chứa thông tin (trong tài sản ui.offset), bạn có thể sử dụng để định vị lại phần tử khác theo cách thủ công.

Answer 3

Bạn phải đặt rõ ràng Trục Y của cả hai phần tử.

Đối với điều này hoặc trong các hàm xử lý sự kiện của cả hai phần tử, bạn sẽ phải đặt Y-Axis hoặc liên kết cả hai phần tử có cùng chức năng.

Mã hóa vui vẻ.

Answer 4

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

Tôi tìm thấy một phần mở rộng cho giao diện người dùng có thể kéo(). Nó hoạt động giống như 'alsoResize' cho giao diện người dùng có thể thay đổi kích thước(), tức là

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

Thêm mã plugin sau thư viện jquery-ui chính.

$.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

Đây là một phiên bản đơn giản của các mã đề cập trong câu trả lời rõ rệt (đối với núm vú cao su như tôi)

• Trong HTML

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

• Trong thẻ Script

  $(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') 
        }); 
       } 
      });  
  });