vue项目实现简单的拖拽功能
产品提了个需求,希望地图上的信息窗口可以任意拖拽。由于需求仅涉及到拖拽,就没有引拖拽相关的插件,用原生的js实现了需求。下面就是贴代码了。
1.希望实现如下截图里的坐标点信息这个div可以拖拽移动:
2.前端代码
<div id="carMessage" @mousedown='draggableFun($event)'></div>
然后在methods里添加方法draggableFun
draggableFun(val){
var div = document.getElementById("carMessage");
var dragFlag = false;
var x,y;
div.onmousedown = function (e) {
e = e || window.event;
x = e.clientX - div.offsetLeft;
y = e.clientY - div.offsetTop;
dragFlag = true;
};
div.onmousemove = function (e) {
if (dragFlag) {
e = e || window.event;
div.style.left = e.clientX - x + "px";
div.style.top = e.clientY - y + "px";
}
};
div.onmouseup = function (e) {
dragFlag = false;
};
},