Question

我正在尝试解决我必须在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/

上查看我的解决方案

Answer 1

这个问题太宽泛了，无法回答。但没有重叠检测：

您的代码应该是这样的： 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});
          }
      }
  });
});

移动div元素

1 个答案: