- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端flutter
HTML5 - 拖放
前言 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在H5中，任何元素都支持拖放，但是需要注意的是，有些元素存有默认行为(如a元素)，应当取消该元素的默认行为。 使用 preventDefault() 取消事件的默认动作 拖放事件 拖动元素-事件： 事件 描述 ondragstart 当元素开始被拖动时触发——开始拖动 ondrag 拖动源触发——正在拖动 属性/方法 描述 files 其属性返回和放置相关的所有文件 types 属性使用数组的形式返回当前注册的格式 effectAllowed 此属性通知浏览器当前可被用户选用的操作 dropEffect 拖放的操作类型 DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖放API</title> <style> section{ DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>拖放API</title> <style> .element{
2.3K10编辑于 2022-12-19 - 来自专栏Springboot框架学习
HTML5 拖放
一、什么是拖放（Drag 和 drop）？ 拖放（Drag 和 drop）在WEB软件应用中是一种常见的操作，就是用户可以用鼠标点击对象以后拖到另一个位置。 拖放是HTML5 标准中的一部分，任何标签元素都能够被拖放。 二、为什么需要拖放？ ，这些模块的摆放一般有一个初始默认位置，各种角色的管理员可以根据自己的喜好来将这些模块按照自己的习惯进行拖动摆放 在HTML5 之前，我们要想实现针对页面中的标签元素的 移动和拖放，没有一个统一的操作标准 ，一般都是监听鼠标点击事件、鼠标移动事件然后配合 DOM对标签元素的操作 来实现 三、HTML5 拖放（Drag 和 drop）的浏览器兼容 Internet Explorer 9+、Firefox、Opera 注：Safari 5.1.2不支持拖动 HTML5 拖放实例 一、实现标签元素的拖放步骤 由于要实现对某个元素的拖放功能，需要事先进行多个参数的设置，所以这里存在了步骤的概念，我们按照如下步骤进行即可，
2.4K20编辑于 2022-08-17 - 来自专栏IMWeb前端团队
HTML5 进阶系列：拖放 API 实现拖放排序
前言 HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。 而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。 拖放事件 拖放事件由不同的元素产生。 源对象： dragstart：源对象开始拖放。 drag：源对象拖放过程中。 dragend：源对象拖放结束。 过程对象： dragenter：源对象开始进入过程对象范围内。 实现拖放排序 上面已经熟悉了拖放 API 的使用，我们来实现个简单的拖放排序，这也是在项目中比较常见的。 插件地址：ios-html5-drag-drop-shim 只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。
2.6K70发布于 2017-12-29 - 来自专栏IMWeb前端团队
HTML5 进阶系列：拖放 API 实现拖放排序
前言 HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。 而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。 拖放事件 拖放事件由不同的元素产生。 源对象： dragstart：源对象开始拖放。 drag：源对象拖放过程中。 dragend：源对象拖放结束。 过程对象： dragenter：源对象开始进入过程对象范围内。 实现拖放排序 上面已经熟悉了拖放 API 的使用，我们来实现个简单的拖放排序，这也是在项目中比较常见的。 插件地址：ios-html5-drag-drop-shim 只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。
2.1K10发布于 2019-12-04 - 来自专栏腾讯IMWeb前端团队
理论 | HTML5 进阶系列：拖放 API 实现拖放排序
HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。 想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。 而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。 拖放事件 拖放事件由不同的元素产生。 实现拖放排序 上面已经熟悉了拖放 API 的使用，我们来实现个简单的拖放排序，这也是在项目中比较常见的。 插件地址：ios-html5-drag-drop-shim 只需要在原有的代码中引入该插件，即可在移动端上实现拖动了。 扫码下方二维码， 随时关注更多前端干货文章！ ▼ 微信：IMWebTech
1.8K31编辑于 2022-06-29 - 来自专栏前端儿
HTML5 的拖放（实例：两个div之间拖放图片）
在两个
元素之间拖放图像--- 代码清单： <!3K10发布于 2018-09-03来自专栏程序猿的大杂烩HTML5绘画与拖放事件
HTML5绘画 在html5中出现了许多新的特性，绘画功能就是其中之一。由于html5新增的这些新特性，所以也在逐渐取代Flash，毕竟Flash比较占用内存，也经常性奔溃。 html5不仅能制作2d的绘画还能做3d的绘画，但是要注意的是这两者使用的函数不一样但都基于canvas。在网络上我们可以搜索到一些使用html5制作的2D或3D的效果图，例如： ? ? ? 如何使用html5进行绘画： 由于我们是做后端开发的，所以在这里只简单介绍一下html5中的2D绘画，绘画的制作都是基于canvas标签的，所以先介绍一下canvas标签： canvas是一个画布，这个画布通常是一个矩形区域 拖放事件 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够实现拖放。 结合以上几个知识点，可以实现将img元素，来回拖放到不同的div元素中，代码示例： ? 运行结果： ? ? ?
4K30发布于 2020-09-23来自专栏杨焱的专栏HTML5 拖放API简单介绍
1、给可以拖动的元素添加属性 draggable=‘true’，绑定dragstart事件，用于给传输对象保存内容，使用event.dataTransfer获取到数据传输对象，绑定selectstart事件，阻止默认行为，用于防止选中文本。
1.2K10编辑于 2021-12-07来自专栏业余草HTML5 拖放(Drag和drop)
大的像淘宝的装修，QQ空间装扮等，小到一些游戏等等随处可见拖放的使用场景。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 目前浏览器支持情况：Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。 下面看看一个具体的字母拖放demo： <!DOCTYPE HTML> <html> <head> <meta charset="gbk"/> <title>HTML5 拖放(Drag和drop)</title> <style> html,body{width:100% src="3.png"/>
- <img src="<em>5</em>.
1.6K20发布于 2019-01-21来自专栏全栈程序员必看Html5 拖放上传图片
DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>HTML5 浏览器拖放 | HTML5 Drag and default: return false; } } // 处理拖放文件列表
3K10编辑于 2022-07-06来自专栏达达前端HTML5中的拖放功能
image 知识点 拖拽的体验，你享受过吗，在HTML5之前，可以使用事件mousedown，mousemove，mouseup巧妙实现页面的拖放操作，但注意拖放的操作范围只是局限在浏览器内部。 而HTML5的拖放API功能直接实现拖放操作，而且拖放的范围已经超出浏览器的边界，HTML5提供的文件api支持拖拽多个文件并上传。 要学会掌握html5中的拖放api和 文件api，光标拖放事件，从web网页上访问本地文件系统。 拖放api 在html5中的拖放api重点： 第一，为页面元素提供了拖放特性； 第二，为光标增加了拖放事件； 第三，提供了用于存储拖放数据的DataTransfer对象 draggable特性 draggable 光标拖放事件 在html5中提供了7个与拖放相关的光标事件： 按照时间的顺序： 第一，开始拖拽时触发的事件，事件的作用对象是被拖拽的元素-dragstart事件 第二，拖放过程中触发的事件，事件的作用对象是被拖拽的元素
3.6K10发布于 2021-02-02来自专栏禅林阆苑前端拾零02—H5拖放总结
前端拾零02—H5拖放总结 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng 拖放总览 前端拖放，无非通过两种方式：1、js鼠标事件监听，动态改变坐标位置；2、H5原生api。随着H5的普及，推荐使用相对简单的H5原生api实现拖放功能。 H5拖放分为两部分：拖放元素和目标元素，分别有不同的属性和监听事件 2. 此时需要用用document的ondragover事件覆盖 5. uninitialized: 不指定 (2) none: 不允许所有行为 (3) copy: 只允许值为"copy"的dropEffect (4) link: 只允许值为"link"的dropEffect (5)
4.6K730发布于 2018-08-17来自专栏青梅煮码H5拖放原生js将图片拖放另外一个元素里
1：什么是拖放？ 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放 2：元素的可拖放 draggable 属性设置为 true
3：元素中的拖放事件 通过拖放事件 ，可以控制拖放相关的各个方面。 event.dataTransfer.getData("text"); //设置和接收URLevent.dataTransfer.setData ("URL","http://blog.csdn.net/zhaohaixin0418"); 5： ) 这大概就是拖放事件涉及到的一些知识点。
2.9K30编辑于 2023-03-02来自专栏JetPackH5在网页中拖放图片
H5中实现拖放效果，常用的实现方法是利用事件drag和drop; 1.设置元素为可拖放。
2.第二步：拖动什么 实现拖放的第二步就是设置拖动的元素，常见的元素有图片，文字，动画，实现拖放功能的是 ondragstart和setData()，即规定当元素被拖动时 dataTransfer.setData()方法设置被拖放数据的类型和值。 ev.dataTransfer.setData("Text",ev.target.id); } 上这这个例子中，数据类型是"Text" 值是可拖动的元素id("drag1"); 3.第三步：放到何处 实现拖放功能的第三步就是讲可拖放元素放到何处 event.prenventDefault() 第4步：进行放置 当放置被拖放数据时，就会发生drop事件，在上面的例子中，ondrop属性调用了一个函数，drop(event)，具体代码如下。
89230编辑于 2022-02-09来自专栏前端印象【HTML5】逐步分析如何实现拖放功能
一、什么是拖放 拖放就是通过鼠标放在一个物体上，按住鼠标不放就可以把一个物体托动到另一个位置。其实我们平时一直都有接触，如图 ? 那么在网页上其实也可以实现同样效果的拖放功能，如图 ? 那么，就让我们来看看如何实现的吧 二、拖放事件 在IE4的时候，Js就可以实现拖放功能了，当时只支持拖放图像和一些文本。 后来随着IE版本的更新，拖放事件也在慢慢完善，HTML5就以IE的拖放功能制定了该规范，Firefox 3.5、Safari 3+、chrome以及它们之后的版本都支持了该功能。 默认情况下，网页中的图像、链接和文本是可以拖动的，而其余的元素若想要被拖动，必须将 draggable 属性设置为 true，这是HTML5规定的新属性，用于设置元素是否能被拖动。 设置字符串，并设置数据类型 getData 获取对应数据类型的字符串 setData() 方法接收两个参数，第一个参数表示的是字符串的数据类型，HTML5规定了两种数据类型，分别是 text/plain
2.2K10发布于 2021-01-29来自专栏用户7873631的专栏拖放奥秘
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #div1{ width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%; margin: -10
1.2K10发布于 2020-10-28来自专栏京程一灯HTML5 拖放API与Vue.js实战
script> export default {}; </script> <style scoped> div.card { margin-bottom: 15px; box-shadow: 0 0 5px HTML5 拖放 API 是什么？ 当用户将鼠标移到可拖动元素上时，拖动操作开始，然后将元素移动到启用拖放的元素上。 再默认情况下，唯一可拖动的 HTML 元素是图像和链接。 ，将会在启用拖放的元素上触发以下事件： Dragenter：当一个元素被拖动到启用拖放的元素上时触发一次Dragover：只要元素仍然位于启用了 drop 的元素上，就会连续触发Drop：在把拖动的元素拖放到启用了拖放的元素上之后触发 修改 App.vue 使其能够反映状态和组件组成： // App.vue <template>
总结 在本文中，我们介绍了什么是 HTML 5 拖放 API ，如何使用，以及如何在 Vue.js 中实现。 拖放功能也可以在其他前端框架和原生 JavaScript 中使用。
5.4K10发布于 2021-01-13来自专栏禅林阆苑前端拾零02—H5原生拖放总结 【原创】
前端拾零02—H5原生拖放总结 目录导航 前端拾零02—H5原生拖放总结 1. 拖放总览 2. Event.preventDefault() 5. 拖放总览 前端拖放，无非通过两种方式：1、js鼠标事件监听，动态改变坐标位置；2、H5原生api。随着H5的普及，推荐使用相对简单的H5原生api实现拖放功能。 H5拖放分为两部分：拖放元素和目标元素，分别有不同的属性和监听事件 2. 此时需要用用document的ondragover事件覆盖 5.
2.2K20发布于 2018-09-26来自专栏YuanXinHTML5原生拖放事件的学习与实践
前言 之前学习了 HTML5 的拖放事件，开发中也用到了拖拽组件。为了厘清整体的逻辑，专门做了一个小例子。 例子基本运用了拖放事件的全部事件，并且尽量简洁的展示了出来。特此记录。 专注前端与算法的系列干货分享，转载请声明出处：原文链接: xxoo521.com 拖放事件介绍 由名字可以看出来，拖放事件由 2 部分组成：拖动和释放。 event.target.classList.remove("active"); target = null; container = null; } 参考链接 代码地址: Github 《HTML5 拖放》 《HTML5 原生拖拽/拖放》
1.6K20发布于 2020-04-20来自专栏青梅煮码vue 中基于html5 drag drap的拖放
px' e.target.style.top = y - 60 + 'px' } }, drop (ev) { console.log('drop拖放事件 ,绑定可拖放区域', event) this.text = ev.dataTransfer.getData('Text') console.log(this.text) e.clientX var y = e.clientY x -= this.offsetX y -= this.offsetY info.x = x - 5 this.imgOffsetY = e.offsetY }, draging (e, item) { item.x = e.clientX - this.imgOffsetX - 5 console.log('done') console.log(event) event.dataTransfer.clearData() } } 最后，希望大家有哪些好的拖放插件
2.2K00编辑于 2023-03-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号