Vue 原生可拖动div(带手柄)

最新推荐文章于 2025-04-02 22:06:05 发布

这是个问题

最新推荐文章于 2025-04-02 22:06:05 发布

阅读量4.6k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_39423672/article/details/79888600

版权

本文介绍如何在Vue项目中实现一个原生的可拖动div，并且该div带有拖动手柄，详细讲解了实现过程和技术要点，包括事件监听、坐标计算和元素位置更新等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//HTML
<div id="app1">
    <div id="drag" >
      <div v-drag class="toolBarTitle move">移动工具栏</div>
    </div>
</div>

//自定义指令
directives:{
   
    drag(el){
     el.onmousedown = function(e){
   
       //获取鼠标点击处分别与div左边和上边的距离：鼠标位置-div位置
       var divx = e.clientX - document.getElementById(