html5 jquery 鼠标拖动例子,JavaScript 拖拽实例代码

一、JS 拖拽的实现实例代码：

拖拽js

html, body {

overflow:hidden;

}

body, div, {

margin:0;

padding:0;

}

body {

color:#fff;

font:12px/2 Arial;

}

p {

padding:0 10px;

margin-top:10px;

}

span {

color:#ff0;

padding-left:5px;

}

#box {

position:absolute;

width:300px;

height:150px;

background:#D5CDDA;

border:2px solid #ccc;

top:150px;

left:400px;

margin:0;

}

#drag {

height:25px;

cursor:move;

background:#724a88;

border-bottom:2px solid #ccc;

padding:0 10px;

}

拖动区域

被拖动的整个div

$(function(){

moveBox($("#box"),$("#drag")) ;

})

//B被拖动的div，BT可拖动区域

function moveBox(B,BT){

var bDrag = false;

var _x,_y;

BT.mousedown(function(event){

var e=event || window.event;

bDrag = true;

_x=e.pageX-B.position().left;

_y=e.pageY-B.position().top;

return false

})

$(document).mousemove(function(event){

if(!bDrag) return false;

var e=event || window.event;

var x=e.pageX-_x;

var y=e.pageY-_y;

console.log(B.position());

var maxL = $(document).width() - B.outerWidth();

var maxT = $(document).height() - B.outerHeight();

x = x < 0 ? 0: x; x = x > maxL ? maxL: x;

y = y < 0 ? 0: y; y = y > maxT ? maxT: y;

B.css({left:x,top:y});

return false

}).mouseup(function(){

bDrag = false;

return false

})

}

二、 js之拖拽效果

主要原理：

1、当鼠标按下时，记录鼠标坐标，用到的是 onmousedown；

2、当鼠标移动时，计算鼠标移动的坐标之差，用到的是 onmousemove；

3、当鼠标松开时，清除事件，用到的是 onmouseup；

了解的知识：

效果图如下：

突然发现有没有效果图都一样哈哈，不说废话了，上代码：

html代码：

js拖拽效果

#div1 {

width : 200px;

height: 200px;

position: absolute;

background: #99dd33;

cursor: move;

}

// js代码

js代码：

window.onload function() {

var disX = disY = 0; // 鼠标距离div的左距离和上距离

var div1 = document.getElementById("div1"); // 得到div1对象

// 鼠标按下div1时

div1.onmousedown = function(e) {

var evnt = e || event; // 得到鼠标事件

disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left

disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top

// 鼠标移动时

document.onmousemove = function(e) {

var evnt = e || event;

var x = evnt.clientX - disX;

var y = evnt.clientY - disY;

var window_width = document.documentElement.clientWidth - div1.offsetWidth;

var window_height = document.documentElement.clientHeight - div1.offsetHeight;

x = ( x < 0 ) ? 0 : x; // 当div1到窗口最左边时

x = ( x > window_width ) ? window_width : x; // 当div1到窗口最右边时

y = ( y < 0 ) ? 0 : y; // 当div1到窗口最上边时

y = ( y > window_height ) ? window_height : y; // 当div1到窗口最下边时

div1.style.left = x + "px";

div1.style.top = y + "px";

};

// 鼠标抬起时

document.onmouseup = function() {

document.onmousemove =null;

document.onmouup = null;

};

return false;

};

};

当然，这个虽然支持大部分浏览器，但是，我觉得div跟随鼠标的速度有点滞后，如果有好的解决办法请联系我喔，谢谢！

以上就是js实现拖拽的实例代码，有需要的小伙伴可以参考下,谢谢大家对本站的支持！