\r\n??????\r\n????{{positionX}}\r\n????{{positionY}}\r\n??<\/p>\r\n<\/body>\r\n\/\/main.js\r\nlet?app?=?new?Vue({\r\n??el:'#app',\r\n??data:{\r\n????positionX:0,\r\n????positionY:0,\r\n??},\r\n??methods:{\r\n????move(e){\r\n??????let?op?=?e.target;????\/\/獲取目標元素\r\n??????\r\n??????\/\/算出鼠標相對元素的位置\r\n??????let?disX?=?e.clientX?-?op.offsetLeft;\r\n??????let?disY?=?e.clientY?-?op.offsetTop;\r\n??????document.onmousemove?=?(e)=>{????\/\/鼠標按下并移動的事件\r\n????????\/\/用鼠標的位置減去鼠標相對元素的位置，得到元素的位置\r\n????????let?left?=?e.clientX?-?disX;??\r\n????????let?top?=?e.clientY?-?disY;\r\n????????\r\n????????\/\/綁定元素位置到positionX和positionY上面\r\n????????this.positionX?=?top;\r\n????????this.positionY?=?left;\r\n????????\r\n????????\/\/移動當前元素\r\n????????op.style.left?=?left?+?'px';\r\n????????op.style.top?=?top?+?'px';\r\n??????};\r\n??????document.onmouseup?=?(e)?=>?{\r\n????????document.onmousemove?=?null;\r\n????????document.onmouseup?=?null;\r\n??????};\r\n????}??\r\n??\r\n??},\r\n??computed:{},\r\n});<\/pre>\n

    Of course, we can bind it as a custom instruction, so that it can be implemented in the form of a calling instruction Drag effect, the following is the code to define custom instructions<\/p>\n

    \/\/ darg.html<\/p>\n

      <em id="mt4nc"></em>
        <var id="mt4nc"></var>
          2.