移动一个div元素

我想解决一个问题，我必须在div内移动一个div元素。移动一个div元素

我发现类似的解决方案，在这个网站的问题，所以我设法解决“移动部分”。

问题是，我想能够点击一个div来选择哪个应该被移动。

最后确保您不能将div移动到另一个div的位置。

我的CSS：

.container { width: 450px; height: 450px; border: 1px #000 solid; position: relative; } 

.box1 { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; left: 0px; top: 100px; background: #006699 } 

.box2 { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; right: 0px; top: 100px; background: #33ccff } 

.player { width: 50px; height: 100px; border: 1px #000 solid; position: absolute; right: 100px; top: 0px; background: red }

我的JS：

$(document).ready(function(){ 
    $('div.container').mousemove(function(e) { 

     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop;  

     if(x < 400 & y < 400) { 
      $('div.box1').css({'left': x}); 
      $('div.box1').css({'top' : y}); 
     } 
    }); 
});

查看http://jsfiddle.net/cGZxv/162/

来源

2014-02-11 smgD

你看过[jQuery UI可拖动]（http://jqueryui.com/draggable/）吗？这听起来像它可能会做你正在寻找的东西，而无需自己手工制作。 –

'$（'div.box1'）.css（{'left'：x，'top'：y}）;' – leaf

这个问题** **太宽泛而不能要求别人去做。重叠检测和反应将是不重要的。你可以像这样点击它来移动它：http://jsfiddle.net/cGZxv/166/ –

的问题我的解决方案过于宽泛回答。但没有重叠检测：

您的代码应该是这样的：LIVE DEMO。

我建议您改用jQueryUI Draggable。

$(document).ready(function() 
{ 
    var clicked = false; 
    var element; 
    $('.container div').mousedown(function(){ clicked = true; element = $(this); }); 
    $('.container div').mouseup(function(){ clicked = false; }); 
    $('div.container').mousemove(function(e) { 
     if(clicked == true) 
     { 
      var cW = $(this).width(); 
      var cH = $(this).height(); 
      var oW = element.width(); 
      var oH = element.height(); 
      var x = e.pageX - this.offsetLeft - oW/2; 
      var y = e.pageY - this.offsetTop - oH/2; 

      if(x < (cW-oW) && y < (cH-oH) && x > 0 && y > 0) 
      { 
       element.css({'left': x, 'top' : y}); 
      } 
     } 
    }); 
});

来源

2014-02-11 22:16:05

移动一个div元素

回答

相关问题