窗口拖拽这一功能在web app中经常要用到,所以我们需要写一个原生的拖拽功能。
1.html代码 在id为myDrag这个div块下写自己的内容。
<div id="draggable" >
<div class="drag-content">
<!--你的代码内容-->
</div>
</div>
2.js代码
var myDrag = document.getElementById("draggable");
//鼠标按下事件
myDrag.onmousedown = function (ev) {
let oevent = ev ;
//ClientX/Y是鼠标针对于浏览器页面的水平坐标/垂直坐标
let distanceX = oevent.clientX - myDrag.offsetLeft;
let distanceY = oevent.clientY - myDrag.offsetTop;
//鼠标移动事件
document.onmousemove = function (ev) {
let oevent = ev ;
myDrag.style.left = oevent.clientX - distanceX + 'px';
myDrag.style.top = oevent.clientY - distanceY + 'px';
};
//鼠标弹起事件
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
};