如何製作一個可拖動的div

Question

我創建了一個可拖動的div，沒有UI或其他插件。但是有一個很大的問題，我無法制作可分割的div。這裏是我的代碼：

$(function() { 
    $(".dragIt").on("mousedown", function(e) { 
     var $dragIt = $(this).addClass('draggable'); 
     var z_idx = $dragIt.css('z-index'), 
      dragHeight = $dragIt.outerHeight(), 
      dragWidth = $dragIt.outerWidth(), 
      positionY = $dragIt.offset().top + dragHeight - e.pageY, 
      positionX = $dragIt.offset().left + dragWidth - e.pageX; 
     $dragIt.css('z-index', 1000).parents().on("mousemove", function(e) { 
      $('.draggable').offset({ 
       top: e.pageY + positionY - dragHeight, 
       left: e.pageX + positionX - dragWidth 
      }); 
     }); 
     e.preventDefault(); 
    }).on("mouseup", function(e) { 
     $(this).removeClass('draggable'); 
    }); 
});​ 

我試着像一些方法：

if ($('.dragIn').position() < $('.dropIn').position()) {console.log('dropped');} 

但它不工作。有沒有解決方法？感謝您的提前！

Answer 1

作爲一項規則，除非效率更高，否則我不會重新創建功能。我建議使用UI插件，但這應該讓你走上正確的道路。

見http://jsfiddle.net/sgy9u/7/

HTML：

<div class="dragIt">Draggable</div> 
<div class="dropIt">Drop Here</div> 

的Jquery：

$(function() { 
$(".dragIt").on("mousedown", function(e) { 
    var $dragIt = $(this).addClass('draggable'); 
    var z_idx = $dragIt.css('z-index'), 
     dragHeight = $dragIt.outerHeight(), 
     dragWidth = $dragIt.outerWidth(), 
     positionY = $dragIt.offset().top + dragHeight - e.pageY, 
     positionX = $dragIt.offset().left + dragWidth - e.pageX; 
    $dragIt.css('z-index', 1000).parents().on("mousemove", function(e) { 
     $('.draggable').offset({ 
      top: e.pageY + positionY - dragHeight, 
      left: e.pageX + positionX - dragWidth 
     }); 
    }); 
    e.preventDefault(); 
}).on("mouseup", function(e) { 
//changes to your code start here 
    var dragOff=$('.draggable').offset(); 
    var off=$('.dropIt').offset(); 
    var height=$('.dropIt').height(); 
    var width=$('.dropIt').width(); 

    //checking the boundaries of dropIt and recording 'dropped' to the console 
    if(dragOff.left>=off.left && dragOff.left<=off.left+width 
     && dragOff.top>=off.top && dragOff.top <=off.top+height) 
     console.log('dropped'); 
//changes to your code end here 
    $(this).removeClass('draggable'); 
});