原生JS實現
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽功能</title>
</head>
<body>
<div style="width:100px;height: 100px;background-color: red;
position:absolute;left:0;top:0;"></div>
<script type="text/javascript">
//獲得div
var div = document.getElementsByTagName('div')[0];
drag(div);
function drag(elem) {
var disX,
disY;
elem.onmousedown = function (e) {
//兼容性操作
var event = e || window.event;
//鼠標按下的時候,距離元素的左/上距離
disX = event.pageX - parseInt(elem.style.left); //elem.style.left 返回的是字符串 XXXpx,
disY = event.pageY - parseInt(elem.style.top); //用parseInt方法可以將數字提取出來
document.onmousemove = function (e) {
var event = e || window.event;
//鼠標按下的點(相對document) - 鼠標按下的點(相對當前點擊的元素)
elem.style.left = event.pageX - disX + "px";
elem.style.top = event.pageY - disY + "px";
}
//當鼠標按上時,使move事件失效,這樣元素就不會再跟着移動了
document.onmouseup = function(e){
document.onmousemove = null;
}
}
}
</script>
</body>
</html>
Jquery實現
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽功能</title>
<script src="js/jquery-3.1.0.js"></script>
</head>
<body>
<div style="width:100px;height: 100px;background-color: red;
position:absolute;left:0;top:0;"></div>
<script type="text/javascript">
//獲得div
var div = $("div");
drag(div);
function drag(elem) {
var disX,
disY;
elem.mousedown(function(e){
//兼容性操作
var event = e || window.event;
//鼠標按下的時候,距離元素的左/上距離
disX = event.pageX - parseInt(elem.offset().left); //elem.style.left 返回的是字符串 XXXpx,
disY = event.pageY - parseInt(elem.offset().top); //用parseInt方法可以將數字提取出來
document.onmousemove = function (e) {
var event = e || window.event;
//鼠標按下的點(相對document) - 鼠標按下的點(相對當前點擊的元素)
elem.offset({top: event.pageY - disY, left: event.pageX - disX});
}
//當鼠標按上時,使move事件失效,這樣元素就不會再跟着移動了
document.onmouseup = function(e){
document.onmousemove = null;
}
});
}
</script>
</body>
</html>
