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;         };       },