html5(拖拽1)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
li{ margin:10px; width:100px; height:30px; list-style:none; background:yellow;}
#div1{ width:200px; height:200px; background:red; margin:200px;}
</style>
<script type="text/javascript">
//拖放 draggable :设置为true 就可以拖放了
//拖拽元素事件：ondragstart 拖拽前触发
//ondrag 拖拽之间触发
//ondragend 拖拽结束触发
window.onload=function(){
var aLi=document.getElementsByTagName("li");
var oDiv=document.getElementById("div1");
var i=0;
for(var i=0;i<aLi.length;i++)
{
aLi[i].ondragstart=function()//拖拽前触发
{
this.style.background="green";
}
aLi[i].ondrag=function()//开始与结束连续触发
{
//document.title=i++;
}
aLi[i].ondragend=function()//拖拽结束触发
{
this.style.background="yellow";
}
}
//目标元素事件：
//ondragenter 进入目标元素触发，相当于mouseover
//ondragover 进入目标，离开目标之间，连续触发
//ondragleave 离开目标元素触发，相当于mouseout
//drop 在目标元素上释放鼠标触发 oDiv.ondragenter=function()
{
this.style.background="green";
}
oDiv.ondragover=function(ev)//enter和leave之间触发
{
//document.title=i++;
ev.preventDefault();
} oDiv.ondragleave=function()
{
this.style.background="red";
}
oDiv.ondrop=function()
{
alert(123);//要想触发ondrop事件，就必须阻止ondragover默认事件。
} //事件执行顺序：drop不触发的时候
//dragstart>drag>dragenter>dragover>dragleave>dragend
//事件执行顺序： drop触发的时候（dragover的时候阻止默认事件）
//dragstart>drag>dragenter>dragover>drop>dragend
}
</script>
</head> <body>
<ul>
<li draggable="true">a</li>
<li draggable="true">b</li>
<li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
html5(拖拽1)的更多相关文章
- 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
随机推荐
- 使用MySQL yum源安装MySQL
#首先,将MySQL Yum存储库添加到系统的存储库列表中. #在https://dev.mysql.com/downloads/repo/yum/地址中,下载mysql yum repository ...
- 14Shell脚本—判断语句
判断语句 Shell脚本中的条件测试语法可以判断表达式是否成立,若条件成立则返回数字0,否则便返回其他随机数值. 条件测试语法的执行格式为 [ 条件表达式 ],切记,条件表达式两边均应有一个空格. 条 ...
- 科学计算库Numpy——概述
Numpy主要用于数组的各种计算. 导入Numpy import numpy as np 数组类型 Numpy的数组类型为numpy.ndarray. array=np.array([1,2,3,4, ...
- Decorator——Python初级函数装饰器
最近想整一整数据分析,在看一本关于数据分析的书中提到了(1)if __name__ == '__main__' (2)列表解析式 (3)装饰器. 先简单描述一下前两点,再详细解说Python初级的函数 ...
- JQuery根据字母检索元素并导航到指定位置
介绍:类似于实现ios通讯录中右侧字母,快速导航到联系人的效果,如图: Html代码如下,分别是字母和港星名字的排序: <input type="text" id=" ...
- Linux学习-什么是登录档
CentOS 7 登录档简易说明 登录档的重要性 为什么说登录文件很重要, 解决系统方面的错误: 用 Linux 这么久了,你应该偶而会发现系统可能会出现一些错误,包括硬件捉不到或者是某些系 统服务无 ...
- CF 219 D：Choosing Capital for Treeland（树形dp）
D. Choosing Capital for Treeland 链接:http://codeforces.com/problemset/problem/219/D The country Tre ...
- Hive中集合类型
Hive中集合类型 创建表,集合是以 - 分割的 数据文件 加载数据 查询数据 查询数组中第一个字段 再建一个表,使用map 查看数据文件 加载数据 查询数据 查询键值 创建表,struct类型 查看 ...
- Leetcode 483.最小好进制
最小好进制 对于给定的整数 n, 如果n的k(k>=2)进制数的所有数位全为1,则称 k(k>=2)是 n 的一个好进制. 以字符串的形式给出 n, 以字符串的形式返回 n 的最小好进制. ...
- 【Luogu】P4363一双木棋（状压爆搜）
题目链接 唉,只有AC了这道题才会感叹考场上没有想出解法的我是多么智障. 我甚至连任何想法都没有. 天啊我当时到底在想些什么. AC这道题我就能进前15了诶. 我们发现只要确定了轮廓线那么此时的状态就 ...