原生拖拽,拖放事件(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拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
随机推荐
- 【结构型】Proxy模式
代理模式是指为其他对象提供代理来控制对象的访问.这种手段有时候可以给我们带来许多好处.如:通过代理可以实现异步响应处理:通过代理可以起到保护或限制对象的使用的作用,从而提高安全性. 在设计上,用户使用 ...
- python 操作 mysql基础补充
前言 本篇的主要内容为整理mysql的基础内容,分享的同时方便日后查阅,同时结合python的学习整理python操作mysql的方法以及python的ORM. 一.数据库初探 在开始mysql之前先 ...
- console调试--转
目录: 一.什么是 Console 二 .什么浏览器支持 Console 三.为什么不直接使用 alert 或自己写的 log 四.console.log(object[,object,.....]) ...
- ACM、OI等比赛中的程序对拍问题
多年前请教于ZXYTIM(zxy)大牛,现在把windows环境下的版本贴出来. 手动数据调试效率太低,程序对拍还是非常实用的,特别适用于OI.蓝桥杯等这些比赛规则.可以用于暴力与AC算法之间的对拍. ...
- 转:BZERO()等的区别
BZERO()等的区别 bzero 原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前 ...
- BZOJ3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队
3400: [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 89 Solve ...
- Qt入门(4)——Qt常见控件
Qt提供了大量的内建控件及通用对话框可满足程序员的绝大部分要求.我们将对这些控件和对话框作一个大概的介绍. 1. QLabel 定义 QLabel* m_labelOrdered = newQLabe ...
- android 再按一次退出程序(实现代码)
效果如图: 实现代码: private long exitTime = 0; /** * 捕捉返回事件按钮 * * 因为此 Activity 继承 TabActivity 用 onKeyDown 无响 ...
- 扩展Visual Studio IDE
安装visual studio 2012 SDK 下载visual studio SDK. 安装可能遇到的问题 安装时报错:Visual Studio 2012 Install Fails: Prog ...
- hadoop2.2.0 MapReduce求和并排序
javabean必须实现WritableComparable接口,并实现该接口的序列化,反序列话和比较方法 package com.my.hadoop.mapreduce.sort; import j ...