js drag拖动事件

(1)为了让元素可拖动，需要使用 HTML5 draggable 属性!!!important。
(2)链接和图片默认是可拖动的，不需要 draggable 属性。在拖放的过程中会触发以下事件：ondragover、ondrop在写回调时须添加:默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理e.preventDefault();e.stopPropagation();在拖动目标上触发事件 (源元素):ondragstart - 用户开始拖动元素时触发ondrag - 元素正在拖动时触发ondragend - 用户完成元素拖动后触发释放目标时触发的事件:ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件ondrop - 在一个拖动过程中，释放鼠标键时触发此事件e.dataTransfer.files[0];获取拖拽文件对象通过FileReader,对文件进行处理拖动过程数据传递:event.dataTransfer.setData(key,value);event.dataTransfer.getData(key);

代码示例:

<p draggable="true" ondrag="myFunction(event)">拖动我!</p>

/* 拖动时触发*/
document.addEventListener("dragstart", function(event) {//dataTransfer.setData()方法设置数据类型和拖动的数据event.dataTransfer.setData("Text", event.target.id);// 拖动 p 元素时输出一些文本document.getElementById("demo").innerHTML = "开始拖动 p 元素.";//修改拖动元素的透明度event.target.style.opacity = "0.4";
});
//在拖动p元素的同时,改变输出文本的颜色
document.addEventListener("drag", function(event) {document.getElementById("demo").style.color = "red";
});
// 当拖完p元素输出一些文本元素和重置透明度
document.addEventListener("dragend", function(event) {document.getElementById("demo").innerHTML = "完成 p 元素的拖动";event.target.style.opacity = "1";
});
/* 拖动完成后触发 */
// 当p元素完成拖动进入droptarget,改变div的边框样式
document.addEventListener("dragenter", function(event) {if ( event.target.className == "droptarget" ) {event.target.style.border = "3px dotted red";}
});
// 默认情况下,数据/元素不能在其他元素中被拖放。对于drop我们必须防止元素的默认处理
document.addEventListener("dragover", function(event) {event.preventDefault();
});
// 当可拖放的p元素离开droptarget，重置div的边框样式
document.addEventListener("dragleave", function(event) {if ( event.target.className == "droptarget" ) {event.target.style.border = "";}
});
/*
对于drop,防止浏览器的默认处理数据(在drop中链接是默认打开)
复位输出文本的颜色和DIV的边框颜色
利用dataTransfer.getData()方法获得拖放数据
拖拖的数据元素id("drag1")
拖拽元素附加到drop元素
*/
document.addEventListener("drop", function(event) {event.preventDefault();if ( event.target.className == "droptarget" ) {document.getElementById("demo").style.color = "";event.target.style.border = "";var data = event.dataTransfer.getData("Text");event.target.appendChild(document.getElementById(data));}
});

js drag拖动事件相关推荐

JS实现拖动事件，滚轴滑动与拖动同步事件
JS实现拖动事件,鼠标滚轴滑动进行内容移动,同时移动与鼠标的拖动同步,例如阴阳师京都商业街部分. 鼠标实现拖动事件例子在页面中可对图片实现拖动到任意位置. html页面 <!DOCTYPE ...
H5鼠标拖动事件（drag）
H5鼠标拖动事件一.元素拖动二.相关事件 1.拖拽元素 (1)dargstart (2)drag (3)dragend 2.目标元素 (1)drop (2)dragover (3)dragente ...
JS拖动事件（鼠标拖动事件）手指事件（PC移动端拖拽）
写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅要想写拖拽事件,首先得了解三块知识点: PC的鼠标拖动事件移动端的手指事件能拿到被移动元素的高宽, ...
html实现鼠标移动波纹效果,js实现拖动滑块和点击水波纹效果
本篇文章就给大家介绍js实现拖动滑块效果和点击水波纹效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 拖动滑块效果: 先看看效果图: Document input[type ...
史上最详细的DOM事件之拖动事件
史上最详细的DOM事件之拖动事件上篇博客讲了DOM的剪贴板事件,这篇博客我们来讲一讲DOM的拖动(DragEvent)事件. HTMl代码: <img src="../../CSS/ ...
vuejs 原生JS 拖拽事件案例
原生JS or Vue 事件案例合集(详细) 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 Section 1 单个或多个鼠标拖拽事件的理解提示:写完文章后,目录可以自动生成,如 ...
Android Launcher3（二） -- Drag拖动实现
研究Launcher的一大重点的就是view的拖动的实现,但在此之前,我们需要清楚ViewGroup.View触摸事件分发拦截机制 1.View的触摸事件的分发分发流程概括如下 dispatchKe ...
js中hover事件时候的BUG以及解决方法
js中hover事件时候的BUG以及解决方法参考文章: (1)js中hover事件时候的BUG以及解决方法 (2)https://www.cnblogs.com/mmykdbc/p/7464050. ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
wxpython实现鼠标拖动事件
wxpython鼠标拖动事件小案例: #coding:UTF-8 import wxapp = wx.App() def dragEVT(event):if event.ButtonDown():pa ...

js drag拖动事件

js drag拖动事件相关推荐

最新文章

热门文章