Перемещение элемента div

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