原生拖拽,拖放事件(drag and drop)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#demo1 {
margin: 20px;
}
#demo1 .panel-list {
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
#demo1 .panel-item {
float: left;
margin-right: 30px;
width: 100px;
height: 100px;
background: #ddd;
border: 1px solid #ddd;
}
#demo1-src {
display: inline-block;
width: 50px;
height: 50px;
background: purple;
}
#demo1 .over {
border: 1px dashed #000;
-webkit-transform: scale(0.8, 0.8);
}
</style>
</head>
<body>
<div id="demo1">
<ul class="panel-list">
<li class="panel-item"></li>
<li class="panel-item"></li>
<li class="panel-item"></li>
<li class="panel-item"></li>
<li class="panel-item"></li>
</ul>
<h2>拖拽下面的方块到上面任意容器中</h2> <!-- 设置draggable使元素成为可拖拽元素 -->
<span class="movable" id="demo1-src" draggable="true"></span> <script>
(function () { var dnd = {
// 初始化
init: function () {
var me = this;
me.src = document.querySelector('#demo1-src');
me.panelList = document.querySelector('.panel-list'); // 为拖拽源监听dragstart,设置关联数据
me.src.addEventListener('dragstart', me.onDragStart, false); // 拖拽鼠标移入元素,在拖放目标上设置视觉反馈
me.panelList.addEventListener('dragenter', me.onDragEnter, false); // 取消元素dragover默认行为,使其可拖放
me.panelList.addEventListener('dragover', me.onDragOver, false); // 拖拽移出元素,清除视觉反馈
me.panelList.addEventListener('dragleave', me.onDragLeave, false); // 鼠标释放,在拖放目标上接收数据并处理
me.panelList.addEventListener('drop', me.onDrop, false);
},
onDragStart: function (e) {
e.dataTransfer.setData('text/plain', 'demo1-src');
},
onDragEnter: function (e) {
if (e.target.classList.contains('panel-item')) {
e.target.classList.add('over');
}
},
onDragLeave: function (e) {
if (e.target.classList.contains('panel-item')) {
e.target.classList.remove('over');
}
},
onDragOver: function (e) {
e.preventDefault();
},
onDrop: function (e) {
var id = e.dataTransfer.getData('text/plain');
var src = document.getElementById(id);
var target = e.target;
if (target.classList.contains('panel-item')) {
target.appendChild(src);
target.classList.remove('over');
}
} }; dnd.init();
}());
</script>
</div> </body>
</html>
参考来源 https://segmentfault.com/a/1190000002810962
原生拖拽,拖放事件(drag and drop)的更多相关文章
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- Android 用户界面---拖放(Drag and Drop)(三)
设计拖放操作 本节主要内容如下: 1. 如何开始拖拽: 2. 在拖拽期间如何响应事件: 3. 如何响应落下事件: 4. 如何结束拖放操作. 开始拖拽 用户使用一个拖拽手势开始拖拽,通常是在 ...
- Android 用户界面---拖放(Drag and Drop)(二)
拖拽事件监听器和回调方法 View对象既可以用实现View.OnDragListener接口的拖放事件监听器,也可以用View对象的onDragEvent(DragEvent)回调方法来接收拖拽事 ...
- Android 用户界面---拖放(Drag and Drop)(一)
用Android的拖放框架,能够允许用户使用图形化的拖放手势,把数据从当前布局中的一个View对象中移到另一个View对象中.这个框架包括:拖拽事件类.拖拽监听器.以及辅助的方法和类. 尽管这个框架主 ...
- HTML5 拖放(Drag 和 Drop)功能开发——基础实战
随着HTML5的普及度越来越高,现在写代码也遇到一些了,经过同事的点播开展了一次Dojo活动用以技术交流,我也乘此机会将HTML5的拖放功能整理了一下. 简介 拖拽(Drag/Drop)是个非常普遍的 ...
- HTML5 CSS3 专题 : 拖放 (Drag and Drop)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31413767 本来准备写一个支持多图片拖拽上传的例子,但是为了更好的理解,先介绍 ...
- Blazor 使用拖放(drag and drop)上传文件
在很多上传文件的应用实例中, 都可以看到[拖放文件到此上传]这种骚功能 ,今天我们就来试试Blazor能不能完成这个想法. 简述HTML5拖放 拖放是HTML5标准的一部分,任何元素都能够拖放,也能够 ...
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
随机推荐
- Python3 如何优雅地使用正则表达式(详解五)
非捕获组命名组 精心设计的正则表达式可能会划分很多组,这些组不仅可以匹配相关的子串,还能够对正则表达式本身进行分组和结构化.在复杂的正则表达式中,由于有太多的组,因此通过组的序号来跟踪和使用会变得困难 ...
- 为ownCloud配置SSL连接
为ownCloud配置SSL连接 在你开始使用ownCloud之前,强烈建议你在ownCloud中启用SSL支持.使用SSL可以提供重要的安全好处,比如加密ownCloud流量并提供适当的验证.在本教 ...
- 【转】中断处理函数中不用disable_irq而用disable_irq_nosync原因
原文网址:http://blog.csdn.net/skyflying2012/article/details/8265869 今天在写触摸屏驱动时在中断处理函数中使用disable_irq关中断发现 ...
- Android录音服务
MediaRecorder Mediarecorder=new MediaRecorder();//创建一个MediaRecorder对象 Mediarecorder.setAudioSource(M ...
- 如何修改Oracle用户密码
大家如果不知道oracle数据库的密码的话,我们可以通过简单的命令行把密码进行修改. 1.打开cmd 2 在弹出的命令提示窗口输入 set oracle_sid=数据库名称(实例),回车.例如数据库名 ...
- Tomcat类加载器
1JVM类加载机制 JVM的ClassLoader通过Parent属性定义父子关系,可以形成树状结构.其中引导类.扩展类.系统类三个加载器是JVM内置的. 它们的作用分别是: 1)引导类加载器:使 ...
- hadoop2.2.0伪分布模式64位安装
hadoop2.2.0伪分布模式64位安装用到的软件:jdk-6u45-linux-x64.bin,hadoop-2.2.0.x86_64.tar.gz 修改主机名vim /etc/sysconfig ...
- Neighbour table overflow --- arp表溢出
[root@jiangyi01.sqa.zmf /home/ahao.mah] #grep . /proc/sys/net/ipv4/neigh/default/gc_thresh* /proc/sy ...
- Java[2] 分布式服务架构之java远程调用技术浅析(转http://www.uml.org.cn/zjjs/201208011.asp)
转自:http://www.uml.org.cn/zjjs/201208011.asp 在分布式服务框架中,一个最基础的问题就是远程服务是怎么通讯的,在Java领域中有很多可实现远程通讯的技术,例如: ...
- [MySQL CPU]线上飙升800%,load达到12的解决过程
接到报警通知,负载过高,达到800%,load也过高,有11了. MySQL版本号为5.6.12-log 1 top 之后,确实是mysqld进程占领了全部资源. 2 查看error日志,无不论什么异 ...