क्या दो jquery.ui draggables को एक साथ जोड़ना संभव है?

Question

मेरे पास दो jquery.ui draggables हैं। मैं वाई-अक्ष के लिए अपने आंदोलन को बाधित कर रहा हूं। अगर किसी को किसी निश्चित वाई-पोजिशन पर खींचा जाता है, तो मैं चाहता हूं कि दूसरे स्वचालित रूप से एक ही वाई-स्थिति पर जाएं और इसके विपरीत। क्या किसी ने कभी इन दोनों को एक साथ जोड़ा है?

Answer 1

अपडेट किया गया: स्क्रिप्ट और डेमो अपडेट किया गया है, इसलिए यह ड्रैग करते समय वाई-अक्ष तक सीमित नहीं है।

यह स्क्रिप्ट कक्षा "समूह" की तलाश करती है जिसके बाद इन संयुक्त वस्तुओं को खींच/छोड़ने के लिए एक संख्या होती है। मैंने demo here पोस्ट किया।

एचटीएमएल

<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 घटना उपयोग करने का सुझाव संबंधित अन्य तत्व की स्थिति को समायोजित करने के लिए: (संपत्ति ui.offset में)

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

    }, 
    ... 
}); 

ui वस्तु जानकारी होगी आप कर सकते हैं मैन्युअल रूप से अन्य तत्व को पुनर्स्थापित करने के लिए उपयोग करें।

Answer 3

आपको दोनों तत्वों के वाई-एक्सिस को स्पष्ट रूप से सेट करना होगा।

इसके लिए या तो दोनों तत्वों के हैंडलर फ़ंक्शंस में आपको वाई-एक्सिस सेट करना होगा या दोनों तत्वों को एक ही फ़ंक्शन के साथ बांधना होगा।

हैप्पी कोडिंग।

Answer 4

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

मैं यूआई खींचने योग्य के लिए एक एक्सटेंशन मिल गया()। यह यूआई आकार बदलने योग्य (के लिए '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 5

यहाँ (मेरे जैसे नौसिखियों के लिए) उल्लेखनीय जवाब में बताया गया कोड का एक सरलीकृत संस्करण है:

• एचटीएमएल

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