È possibile collegare insieme due draggables jquery.ui?

Question

Ho due oggetti di trasporto jquery.ui. Sto vincolando il loro movimento sull'asse y. Se uno viene trascinato in una certa posizione y, voglio che l'altro si sposti automaticamente nella stessa posizione y e viceversa. Qualcuno ha mai collegato due di questi insieme prima?

Answer 1

Aggiornato: Script e demo aggiornata in modo che non è più limitata a l'asse y durante il trascinamento.

Questo script cerca la classe "gruppo" seguita da un numero per trascinare/rilasciare questi oggetti combinati. Ho pubblicato un 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

non l'ho fatto prima, ma io suggerisco di usare l'evento drag per regolare la posizione del rispettivo altro elemento:

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

    }, 
    ... 
}); 

L'oggetto ui conterrà informazioni (nella proprietà ui.offset) è possibile utilizzare per riposizionare manualmente l'altro elemento.

Answer 3

È necessario impostare in modo esplicito l'asse Y di entrambi gli elementi.

Per questo nelle funzioni del gestore di eventi di entrambi gli elementi sarà necessario impostare l'asse Y o associare entrambi gli elementi con la stessa funzione.

Felice codifica.

Answer 4

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

ho trovato un'estensione per l'interfaccia utente trascinabili(). Funziona allo stesso modo di 'alsoResize' per l'interfaccia utente ridimensionabile(), vale a dire

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

Aggiungere il codice del plugin dopo biblioteca principale 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

Ecco una versione semplificata del codice di cui al la risposta marcata (for dummies come me):

• In HTML

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

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