触摸事件后移动div

我正试图在一些矩形div的圆上产生运动。我希望如果一个div被拖到另一个div附近，第二个div在用户拖动的第一个div内移动。有没有这样做的插件，或者我需要产生一些计算2个div的位置的东西。而且，矩形div不仅可以是10格。触摸事件后移动div

这里是我的解决方案。

<html> 
<head> 
    <style type="text/css"> 
     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; 
     } 
    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

    <script src="/lib/jquery.overlaps.js" type="text/javascript" charset="utf-8"></script> 




    <script type="text/javascript"> 
     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<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;     
     } 

    </script> 

</head> 
<body> 
    <div id="container"> 
     <div id ="dynamic-container"> 
      <div class ="marker marker-1"></div> 
      <div class ="marker marker-2"></div> 
      <div id ="innerCircle"></div> 
     </div>     
    </div> 
</body>

目前，此片段产生2周的div一个圆。这可以在圆圈边界上移动。我想，如果div的用户拖动一个div当拖动div触摸另一个，他们一起移动。我试图使用jQuery Overlaps库来获得2个div是否重叠，但我做错了什么。

在此先感谢。你可以建议每个图书馆都很好地接受

来源

2017-04-11 Pierpaolo Ercoli

编辑：

一个更完整的例子将您的示例工作：

工作的jsfiddle： https://jsfiddle.net/mcbo9bs3/

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

      $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});      
     }); 

window.setInterval(function() { 
    $('#result').text(collision($('.marker-1'), $('.marker-2'))); 
}, 200); 


function collision($div1, $div2) { 
     var x1 = $($div1).offset().left; 
     var y1 = $($div1).offset().top; 
     var h1 = $($div1).outerHeight(true); 
     var w1 = $($div1).outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $($div2).offset().left; 
     var y2 = $($div2).offset().top; 
     var h2 = $($div2).outerHeight(true); 
     var w2 = $($div2).outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 
     return true; 
    }

要检测重叠此代码应工作：

function collision($div1, $div2) { 
     var x1 = $($div1).offset().left; 
     var y1 = $($div1).offset().top; 
     var h1 = $($div1).outerHeight(true); 
     var w1 = $($div1).outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $($div2).offset().left; 
     var y2 = $($div2).offset().top; 
     var h2 = $($div2).outerHeight(true); 
     var w2 = $($div2).outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false; 
     return true; 
    }

您可以将其应用于您的代码（替换重叠功能）。

希望它有帮助！

来源

2017-04-11 14:27:05 ProgrammerV5

太棒了！这工作重叠，但现在我必须移动其他股利。所以现在我必须找到第二个div位置并一起移动。 –

这不应该是一个问题，在得到一个触摸事件后，只需对齐这两个div，如果您将编码的运动编码在圆周上，那么将这两个div移动到一起应该花费5分钟。让我知道如果你不能这样做，我会修改这个例子。 – ProgrammerV5

我可以移动其他div没有问题，但它不光滑。因为我设置了第一个div的宽度和第一个div的x和y变量。而且它不好，因为在第一次触摸时它会在圆上移动30px。 –

触摸事件后移动div

回答

相关问题