Arrastar duas ou mais Divs ao mesmo tempo (drag)

AndroidBr · 23 de julho de 2015

Olá

O desafio é arrastar as três divs ao mesmo tempo.

Ex: clica em uma div e arrasta, e as outras (divs) se deslocam proporcionalmente para top ou left, de acordo com o drag que você fizer.

Segue o código das tentativas feitas abaixo:

<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-1.10.2.js"></script><script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script><link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />   <script>$(document).ready(function(){ $( "*", document.body ).click(function( event ) {var offset = $( this ).offset();event.stopPropagation();$( "#result" ).text( this.tagName + " coords ( " + offset.left + ", " + offset.top + " )" );});  offsett = {top:0,left:0}; $("#div1 span").draggable({containment : "#div1",start : function (event, ui){$("#start").text (ui.offset.top + ", " + ui.offset.left);offsett = $(this).offset();print(offsett);},drag : function (event, ui){$("#drag").text (ui.offset.top + ", " + ui.offset.left); difTop = parseInt(ui.offset.top) - parseInt(offsett.top);difLeft = parseInt(ui.offset.left) - parseInt(offsett.left); difTop = parseInt(difTop);difLeft = parseInt(difLeft);ui.offset.top = parseInt(ui.offset.top);ui.offset.left = parseInt(ui.offset.left); var spanTres = $("#spanTres").offset();  console.log("Atual"+" - "+"Start"+" = "+"Dif");console.log("Top "+ui.offset.top+" - "+offsett.top+" = "+difTop+ ", "+"Left "+ui.offset.left+" - "+offsett.left+" = "+difLeft);console.log("Dif + Atual = Resp");console.log("Top "+difTop+" + "+spanTres.top+" = "+(difTop+ parseInt(spanTres.top))+" , "+"Left "+difLeft+" + "+ui.offset.left+" = "+(difLeft+ui.offset.left)); /*console.log(typeof(difTop));console.log(typeof(ui.offset.top));console.log(typeof(difLeft));console.log(typeof(ui.offset.left));*/  //console.log(spanTres.top);//console.log(spanTres.left);$("#spanTres").css({"top":(difTop+ parseInt(spanTres.top))+"px","left":(difLeft+ui.offset.left)+"px"});},stop : function (event, ui){$("#stop").text (ui.offset.top + ", " + ui.offset.left);}});}); function print(obj){    for (var i in obj){        console.log(i + "  " + obj[i]);    }}  </script></head><body><div id="div1" style="border:solid 1px;background-color:gainsboro;"><span id="spanUm">Item 1</span><br /><br /><span id="spanDois">Item 2</span><br /><br /><span id="spanTres">Item 3</span></div><p>Start : <span id="start"></span></p><p>Drag : <span id="drag"></span></p><p>Stop : <span id="stop"></span></p><div id="result">Click an element.</div></body></html>