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
随机推荐
- [bzoj1821][JSOI2010]部落划分（贪心）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1821 分析:题目看起来很吊,但只要贪心就行了,每次取相邻最近的两个点所在的集合合并知道 ...
- [bzoj 2190][SDOI2008]仪仗队（线性筛欧拉函数）
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2190 分析:就是要线性筛出欧拉函数... 直接贴代码了: memset(ans,,sizeof ...
- 网卡MAC地址异常会导致无接受数据包，表现为只有发送没有接收
遇到一个诡异的问题,一块4口博通千兆网卡中两个正常,两个怎么都没有接受,但是博通的程序网卡自检没有任何问题,最后发现是MAC地址的原因.需要将地址改为正常MAC方可正常通讯. 感觉应该是交换机丢弃了M ...
- 1. PermCheck 桃花顺检验 Check whether array A is a permutation.
package com.code; import java.util.Arrays; public class Test04_2 { public static int solution(int[] ...
- 1.求整数最大的连续0的个数 BinaryGap Find longest sequence of zeros in binary representation of an integer.
求整数最大的连续0的个数 A binary gap within a positive integer N is any maximal sequence of consecutive zeros t ...
- PL/SQL个人学习笔记
资料1 -- Created on 2014/8/20 declare -- Local variables here i integer; begin i := 12; -- T ...
- LeetCode 171. Excel Sheet Column Number （Excel 表格列数字）
Related to question Excel Sheet Column Title Given a column title as appear in an Excel sheet, retur ...
- jQuery--编辑表格
表格操作是我们常常遇到的,还记得刚開始学习牛腩新闻公布系统时.跟着视频进行表格的一些基本操作.而对它的原理与概念全然不懂,不过跟着老师的操作而进行操作. 通过这次学习,对表格的操作有了进一步的了解与掌 ...
- cacheed 限制 4节点 3000万 es 批量删除 shell脚本练习 elasticsearch_action
文件分割 "www.laiwunews.cn/xinxi/25324717.html""www.zznews.cn/xinxi/10411214.html"&q ...
- 继承自TWinControl的控件不能在设计期间接受子控件，用代码设置子控件却可以（它的自绘是直接改写PaintWindow虚函数，而不是覆盖Paint函数——对TWinControl.WMPaint又有新解了）
这个控件直接继承自TWinControl,因此不是改写Paint;函数,而是直接改写PaintWindow虚函数,它在VCL框架里被直接调用,直接就把自己画好了(不用走给控件Perform(WM_Pa ...