<!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. Java-JFrame-swing嵌套浏览器步骤

    Java-JFrame-swing嵌套浏览器步骤 一.使用swing嵌套浏览器要实现的功能: 通过java的swing实现在一个窗体中嵌套一个浏览器,可以在这个浏览器中将另一个项目的内容显示出来,只需 ...

  2. day14-推导式和生成器表达式

    1.推导式规则 [每一个元素或者是和元素相关的操作 for 元素 in 可迭代数据类型] ----------遍历之后挨个处理[满足条件的元素相关的操作 for 元素 in 可迭代数据类型 if 元素 ...

  3. STM32CUBEMX入门学习笔记2：关于STM32芯片使用内部flash

    找到正点原子的官网,下载他的HAL库:http://www.openedv.com/thread-109778-1-1.html 找到此例程,并打开其工程文件. 找到此文件,复制到自己工程里 复制到自 ...

  4. LeetCode（307） Range Sum Query - Mutable

    题目 Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclus ...

  5. LeetCode（122） Best Time to Buy and Sell Stock II

    题目 Say you have an array for which the ith element is the price of a given stock on day i. Design an ...

  6. poj-3278 catch that cow（搜索题）

    题目描述: Farmer John has been informed of the location of a fugitive cow and wants to catch her immedia ...

  7. LightOj：1265-Island of Survival

    Island of Survival Time Limit: 2 second(s) Memory Limit: 32 MB Program Description You are in a real ...

  8. Python中的并发

    目录 Python并发 并发三种层次 协程 生成者消费者 新关键字 网络io 线/进程 例子 线程池 进程通信 并发池 future对象 executor对象 参考 Python并发 并发三种层次 个 ...

  9. selenium2 页面对象模型Page Object

    开发Selenium WebDriver测试时,可以使用页面对象模型,这样可使得测试脚本有更高的可维护性,减少了重复的代码,把页面抽象出来.同时页面对象模型也提供了一个注释,帮助缓存远程,避免出现元素 ...

  10. HDU 5514 Frogs 欧拉函数

    题意: 有\(m(1 \leq m \leq 10^9)\)个石子排成一圈,编号分别为\(0,1,2 \cdots m-1\). 现在在\(0\)号石头上有\(n(1 \leq n \leq 10^4 ...