<!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)的更多相关文章

  1. Html5拖拽复制

    拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...

  2. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. HTML5 拖拽复制功能的实现方法

    Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...

  4. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  6. 基于html5拖拽api实现列表的拖拽排序

    基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...

  7. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. html5拖拽总结

    拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...

  9. HTML5拖拽实例

    最近应该会用到,借用一下......小妹儿,你又变懒了 拖拽相关属性 draggable属性是html5的全局属性,是html5支持拖放操作的方式之一,用来表示元素是否可以被拖放,draggable有 ...

  10. html之div拖拽，html5拖拽

    html之div拖拽 http://www.w3school.com.cn/html5/html_5_draganddrop.asp

随机推荐

  1. Django2.0里urls.py里配置的改变

    从Django2.0开始,urls.py配置方法有很大改变. 1.把url函数换成path 2.不在使用^.$作为路由 3.其他地方以后再进一步研究 下面看一个列子: from django.cont ...

  2. Linux下的jdk安装

    我使用的是CentOS7,jdk使用的是JDK1.8 下载好以后,将jdk传到我自己的目录:/home/tool下,通过 tar -xzvf  jdk-8u131-linux-x64.tar.gz解压 ...

  3. Python基础（二）——常用内置函数

    1. 常用内置函数 (1)isinstance(object, classinfo) 用于判断一个对象是否为某一类型. object  是实例对象 classinfo 是基本类型如 int, floa ...

  4. Mac中文乱码问题

    在终端切换到文档所在的目录,输入下面的命令: iconv -c -f GB2312 -t UTF-8 乱码的文件名 >> 新文件的名称

  5. NTC温度采集之数据拟合——freemat软件实现

    在stm32温度采样的过程中,使用到了NTC传感器,上拉接6.2K的电阻,信号给AD采样端口,通过NTC的电阻阻值表中,计算得到下面两端数据,在freemat中实现数据拟合,用于程序中温度和电压信号的 ...

  6. C3P0连接问题

    C3P0 连接时的相关问题: 我的环境是在IDEA中使用C3P0中进行的: 使用C3P0主要用到的jar包都是最新和Mysql8.0兼容的包 在连接的时候遇到: 先是在连接的时候出现数据库连接的时候的 ...

  7. linux中的部分宏

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  8. 网络编程-TCP/IP各层介绍（5层模型讲解）

    1.TCP/IP五层协议讲解 物理层--数据链路层--网络层--传输层--应用层 我们将应用层,表示层,会话层并作应用层,从tcp/ip五层协议的角度来阐述每层的由来与功能,搞清楚了每层的主要协议 就 ...

  9. （手写）mybatis 核心配置文件和接口不在同一包下的解决方案

    smart-sh-mybatis项目 app.xml文件中此处配置为: <!-- 从整合包里找,org.mybatis:mybatis-spring:1.2.4 --> <!-- s ...

  10. hdu1787 GCD Again poj 2478 Farey Sequence 欧拉函数

    hdu1787,直接求欧拉函数 #include <iostream> #include <cstdio> using namespace std; int n; int ph ...