窗口拖拽這一功能在web app中經(jīng)常要用到，所以我們需要寫一個(gè)原生的拖拽功能兼砖。
1.html代碼 在id為myDrag這個(gè)div塊下寫自己的內(nèi)容奸远。
<div id="draggable" >
<div class="drag-content">
<!--你的代碼內(nèi)容-->
</div>
</div>
2.js代碼
var myDrag = document.getElementById("draggable");
//鼠標(biāo)按下事件
myDrag.onmousedown = function (ev) {
let oevent = ev ;
//ClientX/Y是鼠標(biāo)針對(duì)于瀏覽器頁(yè)面的水平坐標(biāo)/垂直坐標(biāo)
let distanceX = oevent.clientX - myDrag.offsetLeft;
let distanceY = oevent.clientY - myDrag.offsetTop;
//鼠標(biāo)移動(dòng)事件
document.onmousemove = function (ev) {
let oevent = ev ;
myDrag.style.left = oevent.clientX - distanceX + 'px';
myDrag.style.top = oevent.clientY - distanceY + 'px';
};
//鼠標(biāo)彈起事件
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};
