DOM元素拖拽效果：

当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置，实现的思路主要是通过鼠标事件按下、移动、抬起，摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置，在拖拽时记下当前鼠标的位置从而计算出鼠标移动距离，最后将元素的当前位置赋值给属性el.style.left和el.style.top即可(如果是图片的话加入：e.preventDefault())。

设置left属性

left 属性规定了元素的左边距缘，只有定义了position：relative或absolute属性的元素才有left属性，元素内联样式中设置了left才能通过el.style.left获取或设置相对于具有定位属性(position定义为relative)的父对象的左边距，所以这里我们需要为元素设定position属性。在允许拖拽的区域设置属性position：relative，被拖拽元素设置属性position：absolute。

定义mousedown事件

当鼠标指针移动到元素上方并按下鼠标按键时触发mousedown事件，mousedown事件仅需按键被按下即可发生(click事件按下并松开之后触发)，通过该事件中我们可以获取鼠标按下时的元素及鼠标相对该元素的位置。

定义onmousemove事件

当鼠标指针移出指定的元素对象时触发onmousemove事件，通过该事件来获取鼠标移动后的位置及计算出相对于具有定位属性(position定义为relative)的父对象的边距。通过left属性将计算到的边距赋值给当前元素，这样当前元素的位置就移动到了当前鼠标所在的位置了(如果当前元素是img的话会出现新窗口打开的现象，这里我们添加一个preventDefault方法来阻止新窗口打开即可)。

定义onmouseup事件

当鼠标按键被松开时触发onmouseup事件，通过该事件来清除onmousemove和onmouseup事件。因为onmousemove 和onmouseup是用document实现的，为避免出现事件冲突所以最好还是执行完之后清除的好。下面是完成的拖拽方法代码：

自定义拖拽指令

还有一种方法就是将该方法绑定到一个自定义指令，这样就可以通过调用指令的形式来实现拖拽效果，具体的实现方法可以参考文章Vue实战066：自定义指令及使用，有如何定义拖拽指令的实例。

​知识拓展：client、 page、screen、 layer、 offset属性的区别

在实现拖拽效果的时候我们需要清楚这几个属性的区别(都是计算鼠标点击的偏移值)，我们只有了解了才能实现我们想要的拖拽效果。

功能拓展：放大、缩小、旋转

实现元素的放大、缩小功能可以通过transform属性中的scale参数值来实现，该值用来定义 2D 缩放转换。而旋转功能则可以通过transform属性中的rotate(angle)参数值来实现，该值用来定义 2D 旋转，在参数中规定角度即可。

总结：

以上内容是小编给大家分享的Vue实战067：DOM元素拖拽效果的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！