<div class="divModule"  v-drag="getData" :id="element.id" v-for="(element,index) in tags" :key="index" style="width:200px;height:200px">
        <divModule  :id="index+1" :property="element" @moduleProperty="getModuleProperty">
        </divModule>
        <div class="bigAndSmall" :id="index+1" v-move="getData">
        </div>
      </div>

there is a v-drag custom instruction on the div of the outer layer that can be used for drag and drop, which has been implemented.

< H2 > the problem now is that you want to drag the small red block in the lower left corner to control the size of the big div. But when you drag the small red block, the big div will also move because of bubbles. Is there any way to solve it? Or there are other ideas to achieve this operation. Ask the boss for help, Crab < / H2 >

bosses can do it if they have other ideas.

v-drag custom instruction supplement

drag: {
      bind: function(el, binding) {
        let oDiv = el; //
        let self = this; //
        oDiv.onmousedown = function(e) {
          //
          let disX = e.clientX - oDiv.offsetLeft;
          let disY = e.clientY - oDiv.offsetTop;

          document.onmousemove = function(e) {
            //
            let l = e.clientX - disX;
            let t = e.clientY - disY;
            //
            oDiv.style.left = l + "px";
            oDiv.style.top = t + "px";
            //
            binding.value({
              id:oDiv.id,
              x: l,
              y: t,
              disX:oDiv.offsetLeft,
              disY:oDiv.offsetTop,
              clientX:e.clientX,
              clientY:e.clientY
            })
          };
          document.onmouseup = function(e) {

            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      },