<!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. vue使用原生js实现滚动页面跟踪导航高亮

    需要使用vue做一个专题页面. 滚动页面指定区域导航高亮. BetterScroll:可能是目前最好用的移动端滚动插件 如何自定义CSS滚动条的样式? 监听滚动页面事件,对比当前页面的位置与元素的位置 ...

  2. zookeeper伪集群（一）

    Zookeeper的安装和配置十分简单, 既可以配置成单机模式, 也可以配置成伪集群模式.集群模式. 本人将对伪集群.集群进行重点介绍: 铺垫: 1.集群必须是奇数(2N+1),伪集群和集群一致. 2 ...

  3. excel日期格式取年份

    具体思路:先将日期格式更改为常规格式,再取常规格式的前4位数字 例如:A1==1981/12/22 第一步B1=TEXT(A1,"emd") 第二步C1=LEFT(B1,4) 结束

  4. 启动activity的标准的action常量及对应的字符串

  5. Win7通知区域的图标怎么去除?

    由于本人有洁癖,最近在用win7的时候,很收不了已经卸载了的一些软件,在win7右下角的通知区域图标中还留有痕迹,于是上网查找了下解决方案. 用以下方法完美解决问题. 这里依然是以注册表的修改方法为主 ...

  6. 了解CSS核心精髓（一）

    CSS 1.css外联 正确写法:<link rel="stylesheet" href="css/style.css" /> <style ...

  7. 令人惊叹的Chrome浏览器插件

    Chrome是一个简洁而又高效(高性能,高消耗)的浏览器.接下来让我吐血推荐一些常用的Chrome插件. 日常插件 uBlock Origin ----- 比Adblock性能更高的广告插件. Adk ...

  8. 【LeetCode】Binary Tree Preorder Traversal(二叉树的前序遍历)

    这道题是LeetCode里的第144道题. 题目要求: 给定一个二叉树,返回它的 前序 遍历. 示例: 输入: [1,null,2,3] 1 \ 2 / 3 输出: [1,2,3] 进阶: 递归算法很 ...

  9. vs2015代码图

    可以看到代码的调用关系. 知乎文章:IDE 而言,是 Xcode 的技术比较先进还是 Visual Studio?

  10. 集合篇 —— Collection(1)：JDK 中的重复实现问题

    1.      问题的提出 在 Java 的集合体系当中,无论是 List(列表)还是 Set(集),在设计的时候都存在一个很奇怪的现象:这两种集合的接口,Java 都为其设计了抽象类 Abstrac ...