之前给过复制命令，这次又给了拖动命令。

是什么蛇皮的东西？它可能像一个样本：

emmm .是的，看起来像这样的鸡肋，但我没办法。大哥喜欢。

因为我们在项目中使用了element-ui，所以所有这些说明都只针对element-ui的对话框组件。如果您使用的其他用户界面库也有这个要求，您应该能够通过绘画和修改来使用它。

事实上，这种拖放的原理仍然很简单：

1.首先按下鼠标(onmousedown)

记录目标元素的当前左值和上值。2.鼠标移动

计算每次移动的横向距离(disX)和纵向距离(disY)，并更改元素3的左侧(左侧=左侧disX)和顶部(顶部=顶部disY)值。鼠标抬起来。

完成拖放并完成一些收尾工作

左边和上面的值很容易得到，关键是如何计算disX和disY。我先普及一下：

ClientX:表示鼠标当前的x坐标。clientY:表示鼠标当前的y坐标，所以伪代码为：

DisX=按下鼠标时的ClientX-松开鼠标时的ClientX Disy按下鼠标时的clientY-松开鼠标时的clientY。就这么简单。好，让我们开始编码。

//下面将使用这个助手方法来获取css相关的属性值const getattr=(obj，key)=(obj.currentstyle？obj . currentstyle[key]: window . getcomputedstyle(obj，false)[key])；const vDrag={ insert(El){/* * *这里是* target:对话框组件* header的容器元素：对话框组件的头部区域，也就是拖动的区域*/const target=El . children[0]；const header=target . children[0]；//鼠标指针类型header . style . cursor=' move '；Header.onmousedown=(e)={//记录鼠标的坐标以及按下时目标元素const currentX=e.clientX的左、顶值；const CurrentY=e . ClientY const left=ParSeint(GetAttr(target，' left '))；const top=ParSeint(GetAttr(target，‘top’))；文件。onmousemove=(event)={//计算鼠标移动时每次移动的距离，改变被拖动元素const dissx=event的位置。client x-currentx；const disY=event . clienty-currentY；target . style . left=`$ { left DISx } px `；target . style . top=`$ { top DIsy } px `；//防止事件的默认行为，可以解决返回false的问题；选择文本时无法拖动；}//释放鼠标时，拖动结束document . onmouseup=()={ document . onmousemove=null；document.onmouseup=null};}}.//每次重新打开对话框时，都要还原它。更新(El) {const target=el。子级[0]；target . style . left=' '；target . style . top=' '；}，//最后卸载时，清除事件绑定unbind (el) {const header=el。儿童[0]。子级[0]；header.onmousedown=null},};导出默认的vDrap这是最简单的拖放。这样可以吗？当然不是。这有什么不好？也就是说，如果你用太大的力把整个框架拖出可见区域，你就不能把它挖出来。

因此，有必要从四个方向改进和判断边界。如果它们超过边界值，它们将不会移动。边界值实际上是屏幕上可以拖动的最大距离，也就是disX和disY的最大值

上边界：target.offsetTop offsetTop:这里，它可以表示目标元素的上边界到页面顶部的距离。下边界：body . height-target . offset top-header . height header . height:保留高度。这意味着你可以把它拖到左边界，只留下外面的可拖动区域：target。offsetlefttarget。width-50 offsetleft:这里可以表示目标元素左边框到页面左侧的距离50:表示保留宽度，只要大于0就可以任意设置。这意味着如果你向左拖动，你会在右边界外侧留下50px的宽度：body。宽度目标。offsetleft-50。这里，50和上面一样，这意味着如果你向左拖动，你会在外面留下50px的宽度。

这里有很多计算边界值的方法，大家可以尝试一下自己的想法。然后我画了一个大概的图来帮助我理解，虽然我觉得只有我自己才能理解。哈哈。

下面用代码实现边界判断就可以了

//.//以上代码省略了表头。onmousedown=(e)={//.//上面的代码省略了//计算四个方向的边界值Const Minleft=target。offsetleftParseint(getattr(target，' width '))-50；const MaxLeft=ParSeint(GetAttr(document . body，' width ')-target . offsetLeft-50；const minTop=target.offsetTopconst MaxTop=ParSeint(GetAtr(document . body，' height ')-target . offsetTop-ParSeint(GetAtr(header，' height '))；文件。onmousemove=(event)={//计算鼠标移动时每次移动的距离，改变被拖动元素const dissx=event的位置。client x-currentx；const disY=event . clienty-currentY；//确定左右边界if (disx0disx=-minleft) {target。风格。left=`$ { left-min left)} px `；} else if(DISx 0 DISx=MaxLeft){ target . style . left=`$ { left MaxLeft } px `；} else { target . style . left=`$ { left DISx } px `；}//判断上下边界if(disy0 disy=-mintop){ target . style . top=`$ { top-mintop)} px `；} else if(DIsy 0 DIsy=MaxTop){ target . style . Top=` $ { Top MaxTop } px `；} else { target . style . top=`$ { top DIsy } px `；}返回false};}您可以在注册后使用它：

El-dialog v-drag title=' dialog box ' : visible . sync=' dialog visible '/El-dialog summary

以上是边肖介绍的Vue指令的拖放功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！