html5——拖拽
基本情况
在HTML5的规范中，我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
拖拽元素
页面中设置了draggable="true"属性的元素
目标元素
任意元素都能成为目标元素
事件监听
//拖拽元素
ondrag //应用于拖拽元素，整个拖拽过程都会调用
ondragstart //应用于拖拽元素，当拖拽开始时调用
ondragleave //应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend //应用于拖拽元素，当拖拽结束时调用
//目标元素
ondragenter //应用于目标元素，当拖拽元素进入时调用
ondragover //应用于目标元素，当停留在目标元素上时调用
ondrop //应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave //应用于目标元素，当鼠标离开目标元素时调用
默认事件
ondragover //默认不会让其他盒子放置在盒子内,e.preventDefault()可以组织默认事件
拖拽案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
} div {
width: 400px;
height: 400px;
background-color: greenyellow;
} .box2 {
margin: 0px auto;
} ul {
width: 100%;
height: 100%;
list-style: none;
} li {
float: left;
width: 100px;
height: 100px;
background-color: #cccccc;
border-radius: 50px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="box2">
<ul>
</ul>
</div>
<script>
var liArr = document.querySelectorAll(".box1 ul li");
var box2 = document.querySelector(".box2");
var ul = document.querySelector(".box2 ul");
var currLi = null;
for (var i = 0; i < liArr.length; i++) {
liArr[i].draggable = true;
liArr[i].ondragstart = function (ev) {
currLi = this;
}
}
ul.ondragover = function (e) {
e.preventDefault();
}
ul.ondrop = function (ev) {
ul.appendChild(currLi);
}
</script>
</body>
</html>
html5——拖拽的更多相关文章
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
- HTML5拖拽实例
最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...
- html之div拖拽，html5拖拽
html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp
随机推荐
- poj 3925 枚举+prime
/* 因为15很小可以暴力枚举然后用最小生成树的prim来计算 */ #include<stdio.h> #include<string.h> #include<math ...
- ArcGIS AO中控制图层中要素可见状态的总结
一.DefinitionExpression 实现新建查询图层,查询结果要素为选中状态 该接口可以通过两种方法来控制要素的可见状态. 思路1 通过该接口的 DefinitionExpression 方 ...
- Lein: Exception in thread "Thread-3" java.net.ConnectException: Connection refused
leiningen Leiningen是你的主要工具, 它用于: 启动一个 REPL 下载+安装类库 运行你的程序 启动一个服务器, 运行你所写的webapps 安装 brew install lei ...
- 国际维修联合会IMA年度大会在瑞士圆满结束
瑞士卢加诺 ☆2016年4月5日至7日 中国设备管理协会国际交流合作中心主任.学府咨询(国际)集团董事长.IMA中国分会主席李葆文教授,应邀出席了4月5日至7日在瑞士卢加诺召开的国际维修联合会年度大会 ...
- 用WebCollector爬取新浪微博数据
教程已转移:http://datahref.com/archives/28 WebCollector爬取新浪微博等完整演示样例project可加群250108697或345054141从群文件里下载. ...
- C#之out和ref区别
out与ref的区别总结:1.两者都是通过引用来传递.2.两者都按地址传递的,使用后都将改变原来参数的数值.3.属性不是变量,因此不能作为 out或ref 参数传递.4.若要使用 ref 或 out, ...
- java-javabean Introspector的应用
Introspector 类为通过工具学习有关受目标 Java Bean 支持的属性.事件和方法的知识提供了一个标准方法. 对于这三种信息,Introspector 将分别分析 bean 的类和超类, ...
- 数据分析在web交互设计中的作用 页面跳出率 100% 原因分析
通过分析访问的路径,发现,访问者访问其他页面,直接跳出 页面跳出率 100% 说明: 连作者都发现的导航路径不清晰 对导航进行改版:清晰.明了
- J - 玩游戏
小A和小B玩游戏,初始的时候小A给小B一组包含n个数的数组.他们按如下的规则进行: 每次小B得到一组数,他把这组数的和加到自己的分数里面(他的初始分数是0),然后他把这组数还给小A. 如果小A得到的这 ...
- open_basedir restriction in effect，解决php引入文件权限问题 lnmp
1.配置了虚拟域名 vim /usr/local/nginx/conf/vhost/siemens.conf server { listen 80; #listen [::]:80 default_s ...