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
随机推荐
- java虚拟机（三）-- 虚拟机类加载机制
1.类加载的时机:类从被加载到虚拟机内存中开始,到卸载出内存为止.包含以下几个阶段: 1.加载 2.验证 3.准备 4.解析 5.初始化 6.使用 7.卸载 2.类加载器的种类 1.启动类加载器:这个 ...
- 关于Git的简单使用
新电脑git push一直出问题,到现在也没有解决,但是一些git的命令还是有用的,就先记下来吧.(下图就是没解决的报错) 一.上传本地项目到git 1.初始化git git init 2.配置用户名 ...
- Cisco IOU Web Interface ： Web IOU
https://github.com/dainok http://sns.clnchina.com.cn/space.php?uid=404779&do=blog&id=4298 ht ...
- Stuts2的"struts.devMode"设置成true后，不起作用的解决的方法
不用 <constant name="struts.devMode" value="true" /> 改成 <constant name=& ...
- Oracle Temp 表空间切换
一.TEMP表空间作用 暂时表空间主要用途是在数据库进行排序运算.管理索引.訪问视图等操作时提供暂时的运算空间,当运算完毕之后系统会自己主动清理.当 oracle 里须要用到 sort 的时候. PG ...
- LeetCode 541. Reverse String II (反转字符串 II)
Given a string and an integer k, you need to reverse the first k characters for every 2k characters ...
- 【poj 1724】 ROADS 最短路（dijkstra+优先队列）
ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12436 Accepted: 4591 Description N ...
- RAID5配置及服务器2003系统安装方法。2000系统的安装要使用7.9版本的引导盘
服务器2003系统安装方法.2000系统的安装要使用7.9版本的引导盘 RAID5配置: 1.为新到的惠普DL380服务器装系统,首先要配置RAID阵列. 如下图进行配置. 启动到如上图阶段,按F8. ...
- Quartz在.Net网站中的使用方法(附Demo)
现在做一个B/S项目需要用到计划任务,本来想自定写一个的,写了几句,突然想看看网上有没有现成可以用的.结果在苦寻之下找到了Quartz这个组件.看过之后感觉还不错.决定用它实现计划任务了.再找找看有没 ...
- 【TJOI 2018】数学计算
[题目链接] 点击打开链接 [算法] 线段树维护区间乘积 [代码] #include<bits/stdc++.h> using namespace std; #define MAXQ 10 ...