<!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. LeetCode之Weekly Contest 93

    第一题:二进制间距 问题: 给定一个正整数 N,找到并返回 N 的二进制表示中两个连续的 1 之间的最长距离. 如果没有两个连续的 1,返回 0 . 示例 1: 输入:22 输出:2 解释: 22 的 ...

  2. Linux安装OpenCV

    sudo apt-get update sudo apt-get install git git clone https://github.com/jayrambhia/Install-OpenCV ...

  3. python-matplotlib-lec1

    接演前文. 设置属性的方法: 使用对象的set_*方法,单独设置每个属性:或使用plt.setp同时设置多个属性 # -*- coding: utf-8 -*- import numpy as np ...

  4. oracle如何保证读一致性 第二弹

    Oracle之数据库一致性读的原理 在Oracle数据库中,undo主要有三大作用:提供一致性读(Consistent Read).回滚事务(Rollback Transaction)以及实例恢复(I ...

  5. 《Scrum实战》第1次课课后任务

    1.必做任务:从知行角度总结T平台 从知行角度总结T平台 头(知识,学习) 做得好的 宣贯会 引入敏捷思想 敏捷宣言 敏捷原则 质量风险前移原则 引入最佳实践 包括了XP的大部分实践 不足 项目管理框 ...

  6. 微信小程序的那些坑

    早闻微信小程序是个坑,结果名不虚传,细数一下我开发小程序遇过到坑. 1.UI组件过度封装. 微信小程序的组件是模仿react.js或vue.js的web组件设计的,并且封装了weui.css样式. P ...

  7. Leetcode 477.汉明距离总和

    汉明距离总和 两个整数的 汉明距离 指的是这两个数字的二进制数对应位不同的数量. 计算一个数组中,任意两个数之间汉明距离的总和. 示例: 输入: 4, 14, 2 输出: 6 解释: 在二进制表示中, ...

  8. 算法理论——Linear SVM

    问题引入 下面的三个超平面都起到分类的效果,哪个最好? 答案显然是第三个.为什么? 直觉上,如果现在我们有个测试点,非常靠近右下角的那个红叉叉,也就是说这个点的特征与那个红叉叉非常接近,这时候,我们希 ...

  9. TOJ1840: Jack Straws 判断两线段相交+并查集

    1840: Jack Straws  Time Limit(Common/Java):1000MS/10000MS     Memory Limit:65536KByteTotal Submit: 1 ...

  10. TOJ4537: n阶行列式

    4537: n阶行列式  Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByteTotal Submit: 28       ...