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