WEB前端開發學習----11. JQuery 實現簡單的拖拽效果

時間 2019-11-09

標籤 web 前端開發學習 jquery 實現簡單效果欄目 HTML 简体版

原文原文鏈接

拖拽效果在網頁中很常見。實現起來也不難。記錄一下今天實現的簡單效果。css

拖拽演示html

快速拖動時，會出現問題，之後修改.ide

說白了，就是3個點擊事件。ui

1. 按下鼠標左鍵，觸發點擊事件，此時記錄下能夠獲得鼠標相對於拖動控件的位置（當前鼠標位置-控件位置）；spa

2. 拖動鼠標，觸發移動事件，能夠計算出鼠標移動的距離（當前鼠標位置-以前算出的相對位置），也就是拖拽控件所移動的距離；.net

3. 鼠標擡起，結束拖動。xml

在JQ中，event.pageX event.pageY能夠獲取鼠標的位置，相對於文檔左上角。htm

如圖：blog

注意，在jq獲取控件的位置時：事件

x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));

要去掉單位px.

可是在修改控件位置時，不要加單位，也不要加引號，也不用加單位px！

dx=event.pageX-x;
dy=event.pageY-y;
//不要加引號！！！
$("#box").css({
"top":dy,"left":dx
})

完整代碼：

[html] view plain copy

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>彈出層，移動</title>
<script src="jq11.js"></script>
<script>
//x,y爲鼠標離控件左上角的相對位置
var x=0;
var y=0;
var flag=false;
$(document).ready(function(){
$("button").click(function(){
$("#box").show();
})
$("h3").mousedown(function(event){
//判斷鼠標左鍵
if(event.which==1){
flag=true;
x=event.pageX-parseInt($("#box").css("left"));
y=event.pageY-parseInt($("#box").css("top"));
}
})
$("h3").mousemove(function(event){
if(flag){
//dx,dy鼠標移動的距離
var dx=0;
var dy=0;
dx=event.pageX-x;
dy=event.pageY-y;
//不要加引號！！！
$("#box").css({
"top":dy,"left":dx
})
}
})
$("h3").mouseup(function(event) {
flag=false;
});
$("span").click(function(){
$("#box").hide();
//關閉以後，應返回原來的位置
$("#box").css({
top:120,left:120
})
})
})
</script>
</head>
<style type="text/css">
*{margin:0px;
padding: 0px;}
body{
font-size: 14px;
padding: 100px;
}
#box{
width:500px;
height:400px;
border:3px ridge #ccc;
display: none;
box-shadow: 2px 2px 20px #888888;
position:absolute;
top:120px;
left:120px;
}
#box h3{
height:30px;
line-height: 30px;
background-color: #ABCDEF;
padding-left: 10px;
padding-right:10px;
color: white;
cursor: move;
}
#box span{
float: right;
font-size: 12px;
cursor: pointer;
color:red;
}
#box p{
height:350px;
padding: 10px;
box-shadow: 3px 3px 10px #aaa inset;
background: #FAFAFA;
}
</style>
<body>
<button>彈出</button>
<div id="box">
<h3><span>關閉</span>鼠標左鍵拖動</h3>
<hr/>
<p>有點小問題，不能快速的拖動，慢慢拖吧。。。之後有時間修改</p>
</div>
</body>
</html>