div 拖拽 - 爱码网

html

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>divDrag</title>
　　　　<style>
　　　　　　#div1{
　　　　　　　　width: 300px;
　　　　　　　　height: 300px;
　　　　　　　　background-color: #ccc;
　　　　　　　　/*一定要绝对定位*/
　　　　　　　　position: absolute;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="div1" class="box"></div>
　　　　<script src="drag.js"></script>
　　</body>
</html>

//js面向过程式写法

window.onload = function(){
　　var div1 = document.getElementById("div1");
　　div1.onmousedown = function(ev){
　　　　var oevent = ev || event;

　　　　var distanceX = oevent.clientX - div1.offsetLeft;
　　　　var distanceY = oevent.clientY - div1.offsetTop;

　　　　document.onmousemove = function(ev){
　　　　　　var oevent = ev || event;
　　　　　　div1.style.left = oevent.clientX - distanceX + \'px\';
　　　　　　div1.style.top = oevent.clientY - distanceY + \'px\'; 
　　　　};
　　　　document.onmouseup = function(){
　　　　　　document.onmousemove = null;
　　　　　　document.onmouseup = null;
　　　　};
　　;
};

jquery

$(\'.box\').mousedown(function(ev) {
    var oevent = ev || event;

　　var distanceX = oevent.clientX - oevent.currentTarget.offsetLeft;
　　var distanceY = oevent.clientY - oevent.currentTarget.offsetTop;


  $(document).mousemove(function(ev) {
        var oevent = ev || event;
        $(\'.box\').css(\'left\', oevent.clientX - distanceX + \'px\');
         $(\'.box\').css(\'top\', oevent.clientY - distanceY + \'px\');
    });
    $(document).mouseup(function(ev) {
        $(document).unbind(\'mousemove\');
        $(document).unbind(\'mouseup\');
    });

})