title: Move a div after touch event
body: <p>I am trying to produce a movement on a circle of some rectangular divs. I want that if a div is dragged near another div, the second div move within the first one the user is dragging. Is there a plugin that do this or I need to produce something calculating the position of 2 divs. And, the rectangular divs can be also 10 divs not only 2.</p>
  
  <p>Here my solution. </p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          div#dynamic-container{width:400px; height:400px; background-color: lightgoldenrodyellow; position:relative; border: 1px solid black;}
          div#innerCircle{width: 380px; height: 380px; position: absolute; left: 10px; top:10px; background-color: lightcoral;
                          border-radius:190px; -moz-border-radius: 190px; -webkit-border-radius: 190px;}           
          div.marker{width: 20px; height:20px; background: black; position:absolute; left:195px; cursor: pointer;
                      -moz-transform:rotate(45deg);
                      -moz-transform-origin:5px 200px;
  
                      transform:rotate(45deg);
                      transform-origin:5px 200px;                          
  
                      -ms-transform:rotate(45deg);
                      -ms-transform-origin:5px 200px;                                
  
                      -webkit-transform:rotate(45deg);
                      -webkit-transform-origin:5px 200px;                       
  
                      z-index:17;
          } 
      &lt;/style&gt;
  
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  
      &lt;script src="/lib/jquery.overlaps.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  
  
  
  
      &lt;script type="text/javascript"&gt;
          function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
              //alert(offsetSelector.left);
  
              var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
              var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
              var theta = Math.atan2(y,x)*(180/Math.PI);        
  
  
              var cssDegs = convertThetaToCssDegs(theta);
              var rotate = 'rotate(' +cssDegs + 'deg)';
              cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
              $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
  
          }
  
          function convertThetaToCssDegs(theta){
              var cssDegs = 90 - theta;
              return cssDegs;
          }
  
          $(document).ready(function(){                
  
  
              //$('.marker-1').draggable();
  
              var items = $('#dynamic-container').find('.marker');
              var i = 0;
              var cssDegs = 15;
              var rotate = 'rotate(' +cssDegs + 'deg)';
  
              for (i; i&lt;items.length; i++){
                  if(i == 0){
                      cssDegs = cssDegs*i;
                  }else{
                      cssDegs = cssDegs+20;
                  }
  
                  console.log("cssDegs: "+cssDegs);
                  rotate = 'rotate(' +cssDegs + 'deg)';
                  //Imposto i gradi a tutti i punti per differenziarli al document ready
                  $(items[i]).css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
                  //items[i].css("background-color","blue"); 
              }
  
              console.log(items);               
  
              $('.marker').on('mousedown', function(){
                  $('body').on('mousemove', function(event){
                      //rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('.marker'));
                      //rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(event.target)); 
                      rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $(this).find('.marker-1')); 
  
  
                      var markers = $(this).find('.marker');
                      var over = overlap(markers[0],$('#container'));
                      if(markers[0] != over){
                          console.log($(markers[0]));
                          console.log(over);
                      }else{
                          console.log('not over');
                      }   
  
                  });                                        
              });
  
              $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});                     
          });
  
          function overlap (div1, div2){
              var res = $(div1).overlaps($(div2));
              return res;                
          }  
  
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
          &lt;div id ="dynamic-container"&gt;
              &lt;div class ="marker marker-1"&gt;&lt;/div&gt;
              &lt;div class ="marker marker-2"&gt;&lt;/div&gt;
              &lt;div id ="innerCircle"&gt;&lt;/div&gt;
          &lt;/div&gt;                
      &lt;/div&gt;  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>At the moment this snippet produce a circle with 2 divs. That can move on the circle border. I want that if the div the user drag a div when the dragged div touch the other, they move together.
  I tried to use also jQuery Overlaps library to get if 2 divs are overlapped but I do something wrong.</p>
  
  <p>Thanks in advance. Every library you can suggest are well accepted</p>