vue图片放大缩小拖动,vue可拖拽流程图

　　本文主要详细介绍vue的图像拖动功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享vue实现图片拖动功能的具体代码，供大家参考。具体内容如下

　　1.主要涉及的元件知识，示意图：

　　2.js代码部分：

　　指令：{

　　拖动：{

　　//指令的定义

　　绑定：函数(el) {

　　//获取当前元素

　　设oDiv=el

　　oDiv.onmousedown=(e)={

　　//计算出鼠标相对于元素的位置

　　let disX=e . clientx-odiv . offset left；

　　let disY=e . clienty-odiv . offsettop；

　　document.onmousemove=(e)={

　　//用鼠标位置减去鼠标相对于元素的位置，得到元素的位置。

　　let left=e . clientx-disX；

　　let top=e . clienty-disY；

　　odiv . style . left=left px ；

　　odiv . style . top=top px ；

　　};

　　document.onmouseup=()={

　　document.onmousemove=null

　　document.onmouseup=null

　　}

　　}

　　}

　　}

　　}

　　3.用法：

　　div class=card v-drag id=card

　　img src=./assets/logo.png

　　/div

　　4.样式部分(确保将位置设置为绝对):卡片{

　　位置：绝对；

　　浮动：左；

　　宽度：200px

　　高度：200px

　　}

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。