html5(拖拽2)
<!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">
//解决火狐下的问题
//必须设置dataTransfer对象的setData方法才可以拖拽除图片外的其他标签。 //dataTransfer对象的方法：
//setData();设置数据key和value(必须是字符串)
//getData() :获取数据，根据key值，获取对应的Valu
//setDragImage: 三个参数：指定的元素，坐标X,坐标Y
//dataTransfer对象的属性：
//effectAllowed: 设置光标样式(none,copy,copyLink,copyMove,link,linkMove,move,all和uninitialized) //files 获取外部拖拽的文件，返回一个fileList列表，fileList下有个type属性，返回文件的类型
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].index=i;
aLi[i].ondragstart=function(ev)//拖拽前触发
{
var ev=ev || window.event;
//ev.dataTransfer.setData('name','hello');
ev.dataTransfer.setData('name',this.index)
ev.dataTransfer.effectAllowed="copy";
ev.dataTransfer.setDragImage(oDiv,50,50)
this.style.background="green";
}
aLi[i].ondrag=function()//开始与结束连续触发
{
//document.title=i++;
}
aLi[i].ondragend=function()//拖拽结束触发
{
this.style.background="yellow";
}
} 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(ev)
{ //alert(123);//要想触发ondrop事件，就必须阻止ondragover默认事件。
alert(ev.dataTransfer.getData("name"));
}
}
</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(拖拽2)的更多相关文章
- 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的GTID复制与传统复制的相互切换
MySQL的GTID复制与传统复制的相互转换 1. GTID复制转换成传统复制 1.1 环境准备 1.2 停止slave 1.3 查看当前主从状态 1.4 change master 1.5 启动主从 ...
- DELL PowerEdge R620安装Windows server（你想将windows安装在何处”找不到任何本地磁盘，“找不到驱动器”）已解决！
你可能碰到过DELL服务器上安装Windows server系列系统时无法识别或找不到硬盘的问题,对于DELL PowerEdge11-14代机器的,大家可以采用DELL的Lifecycle cont ...
- Python基础——模块与包
在Python中,可以用import导入需要的模块.包.库.文件等. 把工作路径导入系统路径 import os#os是工作台 import sys#sys是系统 sys.path.append(os ...
- python 类的使用
目录 类的继承 类的派生 类的组合 菱形继承问题 多态与多态性 dataclass的使用 类的继承 什么是继承,在生活中,子承父业,父亲和儿子就是继承的关系 在python中,父类和子类(派生类),父 ...
- 线段树：POJ3468-A Simple Problem with Integers（线段树注意事项）
A Simple Problem with Integers Time Limit: 10000MS Memory Limit: 65536K Description You have N integ ...
- ACM-ICPC 2017 Asia Urumqi G. The Mountain
All as we know, a mountain is a large landform that stretches above the surrounding land in a limite ...
- JAVA中变量的类型及命名规范
1. 计算机是一种极度精确的机器;2. 要将信息存储在计算机当中,就必须指明信息存储的位置和所需的内存空间;3. 在JAVA编程语言当中,使用声明语句来完成上述的任务; 4. 变量的类型: 5. 变量 ...
- POJ 2763 树链剖分 线段树 Housewife Wind
单个边的权值修改以及询问路径上的权值之和. 数据量比较大,用vector存图会超时的. #include <iostream> #include <cstdio> #inclu ...
- DataContext.ExecuteQuery的两种方法调用
ExecuteQuery主要用于DataContext类直接执行SQL语句的查询,在MSDN上有两种执行方法,下面为两种方法的不同调用: 1.ExecuteQuery<TResult>(S ...
- selenium - 常用等待操作
# 4. 等待操作 # 强制等待from time import sleepsleep(10) # 隐性等待# 设置最长等待时间,在这个时间在只要有个时间点加载完成,则执行下一步代码,比sleep智能 ...