vue实现可重复拖拽图标功能

vue实现可重复拖拽图标功能？页面左边有个图标，鼠标拖动到右边图片上。左边图标没了，移动到右边去了。我想实现左边图标拖完一次之后可以再拖，源源不断的那种
图标是：

<div class="camera">div>

    var box = document.getElementsByClassName("camera")[0]; // 获取元素
      var x, y; // 鼠标相对与div左边，上边的偏移
      var isDrop = false; // 移动状态的判断鼠标按下才能移动
      box.onmousedown = function(e) {
        var e1 = e || window.event; // 要用event这个对象来获取鼠标的位置
        x = e1.clientX - box.offsetLeft;
        y = e1.clientY - box.offsetTop;
        isDrop = true; // 设为true表示可以移动
      };

      document.onmousemove = function(e) {
        // 是否为可移动状态
        if (isDrop) {
          var e2 = e || window.event;
          var moveX = e2.clientX - x; // 得到距离左边移动距离
          var moveY = e2.clientY - y; // 得到距离上边移动距离
          // 可移动最大距离
          var maxX = document.documentElement.clientWidth - box.offsetWidth;
          var maxY = document.documentElement.clientHeight - box.offsetHeight;

          // 范围限定方法二
          moveX = Math.min(maxX, Math.max(0, moveX));

          moveY = Math.min(maxY, Math.max(0, moveY));
          box.style.left = moveX + "px";
          box.style.top = moveY + "px";
        } else {
          return;
        }
      };

      document.onmouseup = function() {
        isDrop = false; // 设置为false不可移动
      };

写个指令

可以对 vue-draggable-resizable 的插件做一个二次封装，实现你想要的效果，类似下图，拖拽完保存位置，下次仍然可以进行拖拽

img