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

最新推荐文章于 2024-07-12 10:55:48 发布
最新推荐文章于 2024-07-12 10:55:48 发布
阅读量4.5k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39423672/article/details/79888600
版权
本文介绍如何在Vue项目中实现一个原生的可拖动div，并且该div带有拖动手柄，详细讲解了实现过程和技术要点，包括事件监听、坐标计算和元素位置更新等关键步骤。
摘要由CSDN通过智能技术生成 
//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(
最低0.47元/天 解锁文章
这是个问题
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用Vue实现一个街机游戏摇杆
ezshine的博客
04-21 886
前言最早实现这个效果，是2011年用Objective-C在iOS里实现的。原仓库地址：https://code.google.com/archive/p/ccjoystick/downloads在Vue里实现这个东西没啥用处，毕竟Vue也不是一个游戏框架，但是谁叫Vue这个话题的热度最高呢😁，写文章还是希望被更多人看到嘛...印象里我在不同时期曾经用三种语言分别实现过这个案例。所以无论用什么框架、语言，只要你了解背后的原理，都很容易实现。三层UI全部UI分为三层第一层是杆头，尺寸不会变化，拖拽的视觉效果区
撸一个VS Code插件——红白机模拟器 支持手柄 支持保存
Falwyuki的博客
05-11 680
nes-vue: Vue 3 的NES(FC)模拟器组件 (gitee.com)，最近心血来潮想试试能不能开发一个VS Code的插件版本。一搜发现竟然已经有了，就叫 小霸王，但我试了一下，发现这个插件现在已经不能用了（我目前用的VS Code版本1.74，也许旧版本的还能用，我没试。），受到它的启发，我撸了一个目前能用、且功能更强大的版本。红白机 - Visual Studio MarketplaceVS Code插件 —— 红白机模拟器。
Vue 操作摇杆实现
weixin_45412353的博客
06-04 410
最近接了一个展厅类的外包项目，里面有个小机器人需要用摇杆控制移动，在网上找了一下，没有找到想要的组件，于是就自己写了一个。
vue 任意两个div之间连线
最新发布
qq_34811855的博客
07-12 263
【代码】vue 任意两个div之间连线。
vue 游戏手柄
zhiyou10086的博客
09-21 706
还是直接上代码吧 <template> <div class="home"> </div> </template> <script> export default { name: "Home", data() { return { interval: null,//时间间隔 }; }, created() { var _this = this; // 监听游戏手柄 win
虚拟轮杆实现触摸屏模拟游戏手柄
这次是真的秃了
06-16 271
自己CV
vue实现div可拖动位置也可改变盒子大小的原理
10-14
在Vue中实现一个div元素既可以拖动改变位置，又可以调整大小的功能，涉及到的核心技术包括事件监听、CSS定位以及DOM操作。下面将详细介绍实现这一功能的步骤和原理。 首先，我们需要监听鼠标事件来处理拖动和改变...
vue-draggable-div：vue可拖拽可伸缩的组件
02-13
Vue可拖动的div 说明 vue可拖拽可伸缩的组件，目前只是上方，详见以下传送门 安装 npm install vue-draggable-div 使用 [removed] import VueDraggableDiv from 'vue-draggable-div' ... components: {...
vue实现div拖拽互换位置
10-17
在代码示例中，还展示了如何使用组件来包裹可拖动的div元素，从而在元素位置变更时，Vue能够自动为元素添加平滑的过渡效果。 最后，样式部分主要定义了容器和子元素的基本样式，包括容器的位置、尺寸以及布局方式。...
vue中实现拖动调整左右两侧div的宽度的示例代码
10-15
在本文中，我们将深入探讨如何使用Vue.js来实现一个拖动调整左右两侧div宽度的功能。这个功能允许用户通过拖动一个中间的分割条来动态调整相邻div的宽度。这对于创建可响应的布局和提供用户友好的界面非常有帮助。 ...
[转]Pico Neo 2✨二、手柄事件管理
小小姑娘
01-08 332
我们要搞清楚，手柄上的按键对应脚本里的哪个枚举值。我会提供一个新脚本，直接将这个新脚本替换掉原脚本即可。或者将旧脚本里面的内容替换为新脚本里面的。我们可以获得手柄的哪些信息、控制手柄做什么（提供脚本 Pvr_ControllerAPI ）提供一个脚本，包含按键按下的回调事件（提供脚本 Skode_PrvHandEvent）新脚本 Pvr_ControllerAPI 我们需要的内容在下面红框中。SDK脚本里不仅包含Pico Neo 2的API，并且注释是英文的。我们最常用的：手柄的震动。
echarts移动端显示手柄
yuhuamei的博客
01-13 429
xAxis:{ axisPointer: { handle: { show: true, color: '#004E52' } }, } ``
vue实现游戏方向摇杆界面
weixin_52633842的博客
12-02 1023
vue2实现游戏方向摇杆界面 这里用的手指触摸事件
VRTK之手柄事件监听以及重写StartUsing方法实现与物体的交互
weixin_30788731的博客
05-24 1115
一.VR开发中经常会用到手柄事件的监听，VRTK中提供了一个例子 VRTK_ControllerEvents_ListenerExample ，首先手柄需要添加VRTK_ControllerEvents脚本，然后通过 实现了对手柄按钮的监听，几个常用的事件： ·TriggerPressed - 当trigger被扣下一半左右时发送事件. ·TriggerReleased - ...
Vuedraggable 拖拽组件
单飞吧的博客
09-08 1210
raggable为基于Sortable.js的vue组件，用以实现拖拽功能。 官网：vuedraggable 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容 安装 npm install vuedraggable 引入 import draggable from 'vuedraggable' 官方例子： hello.vue &lt
摇杆控制方向原理_Vue框架 | 一文教会你如何实现王者荣耀游戏摇杆
weixin_33183792的博客
12-31 1407
前言最早实现这个效果，是2011年用Objective-C在iOS里实现的。原仓库地址：https://code.google.com/archive/p/ccjoystick/downloads在Vue里实现这个东西没啥用处，毕竟Vue也不是一个游戏框架，但是谁叫Vue这个话题的热度最高呢，写文章还是希望被更多人看到嘛...印象里我在不同时期曾经用三种语言分别实现过这个案例。所以无论用什么框架、...
vue 关于鼠标的点击事件事件
sky_laogong的博客
03-04 2522
@click="click" 鼠标点击 @mousedown="down" 按下鼠标 @mouseup="up" 松开鼠标 @dblclick="dblclick" 双击 @mousemove="move" 鼠标移动 @mouseleave="out" 鼠标离开 @mouseout ="out" 鼠标移出 @mouseenter="enter" 鼠标进入 @mouseover="ent.
vue div拖拽移动
qq_38321137的博客
12-07 3835
div拖拽
bootstrap vue 可拖动的DIV
06-09
Bootstrap Vue 没有提供可拖动的 DIV，但可以使用原生的 HTML5 drag and drop API 来实现。 示例代码如下： ```html <template> <div> <div class="drag-box" draggable="true" @dragstart="dragStart" @dragend="dragEnd" > 可拖动的 DIV </div> <div class="drop-box" @dragover.prevent @drop="drop" > 放置区域 </div> </div> </template> <script> export default { methods: { dragStart(event) { // 设置被拖动元素的数据 event.dataTransfer.setData("text", event.target.id); }, dragEnd(event) { // 拖动结束后的操作 }, drop(event) { event.preventDefault(); // 获取被拖动元素的数据 const data = event.dataTransfer.getData("text"); // 将被拖动元素添加到放置区域 event.target.appendChild(document.getElementById(data)); } } } </script> <style> .drag-box { width: 100px; height: 100px; background-color: #f00; color: #fff; text-align: center; line-height: 100px; } .drop-box { width: 200px; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px; } </style> ``` 上面的代码中，我们创建了一个可拖动的 DIV，它的 `draggable` 属性被设置为 `true`，并且在 `dragstart` 事件中设置了被拖动元素的数据。在放置区域的 `drop` 事件中，我们获取了被拖动元素的数据，并将其添加到放置区域中。 在 CSS 中，我们设置了可拖动的 DIV 和放置区域的样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值