JS實現拖拽
上代碼吧
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="ldiv"
style="margin-left:100px ; background: blue; width: 100px;height: 100px;position: fixed;z-index: 2;">
</div>
<div id="rdiv"
style="margin-left:500px ; background: red; width: 100px;height: 100px;position: fixed;">
</div>
<script>
let t_div;
class Drag {
constructor(id) {
this.cdiv = document.querySelector(id)
this.divX = 0;
this.divY = 0;
this.init();
}
init() {
this.cdiv.onmousedown = function (ev) {
this.divX = ev.clientX - (this.cdiv.offsetLeft);
this.divY = ev.clientY - (this.cdiv.offsetTop);
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false;
}.bind(this)
}
fnMove(ev) {
this.cdiv.style.marginLeft = ev.clientX - (this.divX) + 'px';
this.cdiv.style.marginTop = ev.clientY - (this.divY) + 'px';
}
fnUp() {
document.onmousemove = null;
document.onmouseup = null;
}
}
class LimitDrag extends Drag{
constructor(id){
super(id);
}
fnMove(ev){
super.fnMove(ev);
if(this.cdiv.offsetLeft <0){
this.cdiv.style.marginLeft = 0;
}
if(this.cdiv.offsetTop <0){
this.cdiv.style.marginTop = 0;
}
}
}
new Drag('#ldiv');
new LimitDrag('#rdiv');
</script>
<style>
</style>
</body>
</html>
LimitDrag繼承於Drag類，重寫了fnMove()方法，限制了拖動範圍
H5拖拽實現
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>H5拖動</title>
<style>
.droptarget {
float: left;
width: 100px;
height: 35px;
margin: 15px;
border: 1px solid #aaaaaa;
}
#dragtarget {
width: 100%;
height: 100%;
background: red;
color: azure;
margin: 0px;
text-align: center;
line-height: 35px;
}
</style>
</head>
<body>
<div class="droptarget">
<div draggable="true" id="dragtarget">
<span>散步</span>
</div>
</div>
<div class="droptarget"></div>
<script>
/* 拖動時觸發*/
document.addEventListener("dragstart", (event) => {
//dataTransfer.setData()方法設置數據類型和拖動的數據
event.dataTransfer.setData("Text", event.target.id);
//修改拖動元素的透明度
event.target.style.opacity = "0.4";
});
document.addEventListener("drag", function (event) {
});
// 當拖完p元素重置透明度
document.addEventListener("dragend", function (event) {
event.target.style.opacity = "1";
});
/* 拖動完成後觸發 */
// 當p元素完成拖動進入droptarget,改變div的邊框樣式
document.addEventListener("dragenter", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "3px dotted red";
}
});
// 默認情況下,數據/元素不能在其他元素中被拖放。對於drop我們必須防止元素的默認處理
document.addEventListener("dragover", function (event) {
event.preventDefault();
});
// 當可拖放的p元素離開droptarget，重置div的邊框樣式
document.addEventListener("dragleave", function (event) {
if (event.target.className == "droptarget") {
event.target.style.border = "";
}
});
/*對於drop,防止瀏覽器的默認處理數據(在drop中鏈接是默認打開)
復位輸出文本的顏色和DIV的邊框顏色
利用dataTransfer.getData()方法獲得拖放數據
拖拖的數據元素id(“drag1”)
拖拽元素附加到drop元素*/
document.addEventListener("drop", function (event) {
event.preventDefault();
if (event.target.className == "droptarget") {
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
</body>
</html>
這個就清晰多啦
h5的新特性，draggable屬性，包括dom事件都非常清晰
希望給大家帶來幫助。。。