<!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">

 //拖放  draggable :设置为true 就可以拖放了

 //拖拽元素事件：ondragstart  拖拽前触发

             //ondrag     拖拽之间触发

             //ondragend   拖拽结束触发

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].ondragstart=function()//拖拽前触发

        {

           this.style.background="green";

        }

        aLi[i].ondrag=function()//开始与结束连续触发

        {

           //document.title=i++;

        }

        aLi[i].ondragend=function()//拖拽结束触发

        {

           this.style.background="yellow";

        }

     }

     //目标元素事件：

     //ondragenter  进入目标元素触发，相当于mouseover

     //ondragover   进入目标，离开目标之间，连续触发

     //ondragleave   离开目标元素触发，相当于mouseout

     //drop          在目标元素上释放鼠标触发

     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()

     {

        alert(123);//要想触发ondrop事件，就必须阻止ondragover默认事件。

     }

     //事件执行顺序：drop不触发的时候

     //dragstart>drag>dragenter>dragover>dragleave>dragend

     //事件执行顺序： drop触发的时候（dragover的时候阻止默认事件）

     //dragstart>drag>dragenter>dragover>drop>dragend

 }

</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(拖拽1)的更多相关文章

  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. python--以1-31的数字作为结尾的列表？论英文好的重要性!

    一.python基础教程第2板(修订版)[代码清单2-1]中有一段要求打印‘以1-31的数字作为结尾的列表’ 截取代码示例:endings =['st','nd','rd'] +17*['th'] + ...

  2. Ubuntu 18.04 下用命令行安装Sublime

    介绍: 添加来源: $ wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add - $ sud ...

  3. Java使用Apache的HttpClient组件发送https请求

    如果我们直接通过普通的方式对https的链接发送请求,会报一个如下的错误: javax.net.ssl.SSLHandshakeException: sun.security.validator.Va ...

  4. mysql 编程

    一.存储函数 相当于php或者js中有返回值的函数 --完成一定“计算”后返回单个的数据值 定义: create function 函数名(parameter p1 value_type, param ...

  5. python爬虫基础18-Chrome调试前端工具

    01 Chrome调试 抓包工具原理 Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具.使用开发者工具来重演,调试和剖析您的网站. 其中常用的有Elements(元 ...

  6. CUB reduce errorinvalid configuration argument

    解决CUB reduce errorinvalid configuration argument问题 在写TensorFlow代码时遇到报错 CUB reduce errorinvalid confi ...

  7. GoF23种设计模式之结构型模式之代理模式

    一.概述 为其他对象提供一种代理以控制对这个对象的访问. 二.适用性 1.远程代理(RemoteProxy):为一个对象在不同的地址空间土工局部代表. 2.虚代理(VirtualProxy):根据需要 ...

  8. Centos7 开机显示 ERST: Failed to get Error Log Address Range” 导致无法开机解决方法

    开机显示 ERST: Failed to get Error Log Address Range”   导致无法开机,也无法重新安装系统,解决方法:开机进入BIOS , 关闭ACPI选项即可正常开机

  9. SQL_3_表达式、条件语句与运算

    加号的两种用法: 1.在SELECT子句中使用+号以执行对数据的运算并将结果显示出来. SELECT ITEM WHOLESALE WHOLESALE+0.15 FROM PRICE; 还可以重命名新 ...

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

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