H5 drag&drop 写一个拖动定位的demo

最新推荐文章于 2024-08-08 23:38:27 发布
最新推荐文章于 2024-08-08 23:38:27 发布
阅读量3.9k 收藏
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/realDE/article/details/76285334
版权

概述

完成的效果是，父元素内的单个元素item可以通过拖拽定位。在线地址
这里写图片描述
ps:目前效果是拖拽目标以及定位目标互换位置，后面一点会做拖拽目标添加到定位目标之前，定位目标之后的元素一次向下移动

实现思路

实现思路是每一个li标签都是一个可以成为拖拽目标的元素，也就是我会触发每一个li标签的dragover以及drop事件，而拖拽的内容我会放到li标签的子元素中，这里我用的a标签。通过dragstart事件setData我需要的属性，也就是拖动目标的index，这里我使用了jq的index()，获得拖动a标签的父元素li在整个ul中的index。然后在drop事件中使用getData获得index，进行后续操作。

运用h5新的api–drag&drop，具体属性

最低0.47元/天 解锁文章
Lalala这是我的小马甲哦
关注
专栏目录
vue 中基于html5 drag drap的拖放
li420520的博客
11-02 2508
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。 vue 中基于html5 drag drap的拖放 案例一： 开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同一区域内元素可以拖着跑，上代码！ move (e) { let odiv = e.target // 获取目标元素 ...
[前端] H5 drag drop 拖动
网站前端/PHP/Android/其他
04-30 4518
一、介绍 mousedown mouseup mousemove dragstart dragend drag (在拖动元素上执行) 首先要在此元素上设置draggable="true" 为可拖 dragenter dragleave dragover (在目标元素上执行) drop 放下 (在目标元素上执行) dropzone表示可以放到哪个区域 <p d...
HTML5 拖放（附带源码及动画演示）
最新发布
懒羊羊大王的博客
08-08 1081
拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。实例及代码如下：
HTML5原生的Drag和Drop,H5原生拖放(Drag and Drop)demo以及浏览器兼容性处理
weixin_29410959的博客
05-31 651
H5原生拖放(Drag and Drop)demo以及浏览器兼容性处理这篇文章发布于 2020/08/22，归类于 JavaScript标签：js拖拽，原生js拖放，js拖放，js拖放浏览器兼容性，HTML5 拖放，dragstart，drop一般在网页中，如果需要实现拖放，首先要有两个元素可拖动的元素，元素draggable="true"属性就是可拖放，如果设置为false就是不可拖放可以放置的...
vue之关于HTML5拖放（drag）
youyanh的博客
01-22 863
简单拖放可参考w3schoo中H5拖放教程可实现将某部分元素拖放至指定元素内。 主要记录下拖放实现位置互换 使用html文本文件的可参考： https://www.cnblogs.com/shemingxin/p/13519799.html 主要记录下vue实现H5的拖放位置互换，虽然有些组件可实现，但样式调整修改不易。下面简单例子记录下拖放的实现 代码部分及简单样式 <template> <div class="hello"> <el-row :gu
Dragdemo源代码
08-02
拖动效果源代码。还有消息提醒数字demo
html5移动端拖拽图片、拖拽标签等插件以及相应的demo、适用于手机网址开发和mui前端开发、h5app开发中的图片拖拽等
06-10
Mui是一个轻量级的前端框架，特别适合移动H5应用开发。集成HTML5拖放功能，可以让Mui应用的交互更加直观和流畅。开发者需要理解Mui的组件结构，然后将拖放功能适配到相应组件中。 5. **跨平台兼容性** 虽然HTML5...
H5---全局拖拽属性
weixin_45626166的博客
09-26 796
H5—全局拖拽属性 （1）draggable全局拖拽属性—规定元素是否可拖动 注意：链接和图像默认是可拖动的，不需要 draggable 属性 <p draggable="true"><br />这是一段可拖拽的段落</p> H5—拖拽API 拖拽API是H5的新特性，在正式介绍前首先需要了解两个概念“拖拽和释 放”。 新概念： 拖拽drag、释...
H5 drag拖放
HZ___ZH的博客
10-11 343
demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> #container { width: 800px; height: 800px; display: flex; justi
『HTML5梦幻之旅』 - 仿Qt示例Drag and Drop Robot（换装机器人）
热门推荐
Yorhom's Game Box
07-06 1万+
前面我们看到的机器人就是通过这个类来实现的。但是正如学过生物必修一的同学都知道，动物生命层次是这样的：个体->系统->器官->组织->细胞，我们的机器人就是个体，那么四肢构成运动系统，以此类推。所以我们的这个Robot类就只是个装载头部，身躯，四肢的容器。在上面给出的文件结构中可以看到，还有Head.js和Body.js这些类，他们的实例化对象就是放在Robot这个个体里的部件了
基于html5dragapi实现的vue树形拖拽组件
08-10
基于html5 drag api实现的vue树形拖拽组件
vue-dragDrop
04-08
表格OCR测试工具 帮助我们改善表格识别器。 功能预览 的开放式标签工具，属于Form OCR测试工具集（FOTT）。 这是该工具的一个MAIN分支。 它包含所有可用的最新功能。 这不是最稳定的版本，因为这是预览。 此存储库的目的是允许客户在使用Microsoft Forms和OCR服务时测试可用的最新工具。 当前，标签工具是我们在此展示的第一个工具。 用户可以提供反馈，并进行特定于客户的更改以满足他们的独特需求。 Microsoft Azure Form Recognizer团队将定期更新源代码。 如果您想贡献，请检查贡献部分。 如果您要签出我们工具的最新GA版本，请点击此。 FOTT的标签工具是一个用编写的React + Redux Web应用程序。 该项目是通过引导的。 标签工具的当前功能：（您可以查看简短的演示） 以PDF，JPEG或TIFF格式标记表单。 通过训
vue-drag-drop：轻量级的Vue包装器，抽象出了拖放浏览器API的重要部分
02-06
:exclamation_mark: 1.0.0版本已经发布！ 最后，这包括对IE / Edge的支持。 请注意，这需要完全跳过本机transferData事件属性，而转而使用保留当前拖动传递信息的全局变量。 从理论上讲，这可以打破一些极端事件，这些事件涉及同时发生的多个拖动事件，但我认为这种可能性很小，甚至不可能。 反馈非常感谢。 Vue拖放 一个轻巧的包装器，抽象了的精简部分。 观看。 目录 介绍 拖放API相当过时。 以下是一些令人讨厌的问题： 从可拖动元素传输到drop数据仅在drop的drop事件中可用。 想拿期间看看拖动的数据dragover事件？ 说，以确定我们是否可以允许下降？ 抱歉! 没有对您的用户有用
vue-drag-drop-demo:VueDragDrop的一组演示
04-30
Vue拖放演示 VueDragDrop的一组演示 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 有关工作原理的详细说明，请参阅。
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动
06-20
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动元素到指定的对应位置
vue中 使用h5 drag实现拖拽功能
m0_48791508的博客
04-26 834
先了解一下h5中的drag事件： 先贴一段代码： 先设置draggable属性为true //开始拖拽时执行 通过e.dataTransfer.setData 设置数据 handleDragStart (e, item) { e.dataTransfer.setData('draggingData', item); this.dragging = item; // 第二种写法，不使用setData那种写法，自己在data中定义一个变量 }, // 拖拽完成事件(
拖拽的方式使用qbuttongroup_基于Vue和H5（Drag）的拖拽式表格
weixin_39682412的博客
11-30 255
先上最终效果图拖拽式表格是如何设计的？我想大家可能对拖拽式表单，拖拽式图表有所了解过。如这样： 或者是这样的 那么拖拽式表格到底是什么样的呢，我们来看看设计页面！实现一个拖拽式表格需要哪些功能？其实不难看出，拖拽模式下的产物往往离不开以下几个功能：拖拽（这里使用h5的drag）组件（控件）的数据源拖拽时的渲染方式撤销与恢复（方便我们设计表格）拖拽式表格的核心功能点如下：组件分为统计字段...
HTML5拖拽API详解：drag & drop事件与数据交换
当用户开始拖动该元素时，浏览器会显示一个半透明的复制版。拖拽过程中，涉及的主要事件包括： 1. `dragstart`：当用户按下鼠标并开始拖动元素时触发。 2. `drag`：在拖动过程中持续触发，模拟鼠标移动。 3. `...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值