<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <style>
         li{
             list-style: none;
             width: 100px;
             height: 30px;
             background: red;
         }
         div {
             width: 100px;
             height: 50px;
             background: blue;
             margin: 200px;
         }
     </style>
 </head>
 <body>
     <!-- 拖放：
     1.draggable:true（可拖拽）/false（默认）;
         ①在chorme/safari下可拖拽，但拖拽出来的是元素的副本，并且带有禁止标志，元素还是在原地；其他浏览器没反应（ie很诡异）；
     2.拖放事件：
         ①拖放元素事件：事件对象为被拖拽元素；
             Ⅰdragstart:拖放前触发（按下去的时候是不会触发的，而一拖放的那一刻就触发了）；
             Ⅱdrag:拖拽开始与拖拽结束之间连续触发（与原生js中的onmousemove不同的是，onmousemove是鼠标移动的时候才触发，而drag是只要在开始与结束之间，不论鼠标动与不动，都在连续触发）；
             Ⅲdrageng:拖放结束触发(即鼠标按键抬起的一刻);
         ②目标元素事件：事件对象为目标元素；
             Ⅰdragenter:移入目标元素的时候触发，相当于onmouseover，区别在于子级不会影响到父级；
             Ⅱdragover:在dragenter和dragleave之间连续触发，相当于drag，只是对象不同而已；
             Ⅲdragleave：移除目标元素的时候触发，相当于onmouseout，区别在于子级不会影响到父级；
             Ⅳdrop:在目标元素上释放鼠标触发(前提是必须要阻止ondragover的默认事件)--除了ff；
     3.事件的执行顺序：
         ①drop不触发的时候：-dragstart>drag>dragenter>dragover>dragleave>dragend;
         ②drap触发的时候(drapover的时候阻止默认事件)：dragstart>drag>dragenter>dragovr>drop>dragend
     4.不能释放的光标样式和能释放的光标样式不一样；
     -->
     <ul>
         <li draggable="true">111</li>
         <li draggable="true">222</li>
         <li draggable="true">333</li>
     </ul>
     <div id="div"></div>
     <script>
         var aLi=document.getElementsByTagName('li');
         var oDiv=document.getElementById('div');
         for(var i =0;i<aLi.length;i++){
             aLi[i].ondragstart= function () {
                 this.style.background='blue';
             };
             aLi[i].ondrag= function () {
                 //document.title=i++;
             }
             aLi[i].ondragend= function () {
                 this.style.background='red';
             }
         }
         oDiv.ondragenter= function () {
             this.style.background='red';
         };
         oDiv.ondragover= function (ev) {
             document.title=i++;
             ev=ev||event;
             ev.preventDefault();
             //return false;
         }
         oDiv.ondragleave= function () {
             this.style.background='blue';
         }
         oDiv.ondrop= function () {
             alert(123);
         }
     </script>
 </body>
 </html>

h5拖放-基础知识的更多相关文章

  1. HTML基础知识

    一个完美的web前端攻城狮,所具备的专业素养有:HTML5.XHTML.CSS3.JavaScript.JQuery.PS.PHP等.所以说,我要学的东西还有很多... 没别得,我也是一个H5的初学者 ...

  2. 基础知识漫谈（2）：从设计UI框架开始

    说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...

  3. HTML基础知识总结

    经过这段时间的学习,对于html的一些基础知识有了一定的了解.所谓好记性不如烂笔头,唯有一点点累积,才能汇聚成知识的海洋.现在,我对这段时间的学习做一个总结. 一.HTML的定义 HTML,超文本标记 ...

  4. Runloop基础知识

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

  5. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  6. 背水一战 Windows 10 (56) - 控件（集合类）: ListViewBase - 基础知识, 拖动项

    [源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合 ...

  7. 移动端头部适配 meta基础知识

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...

  8. 16第一章 ASP.Net编程基础知识

    第一章        ASP.Net编程基础知识 第一章        ASP.Net编程基础知识 本章首先介绍用ASP.Net技术编制服务器端动态网页所需的网络和HTML标记语言方面的有关知识.然后 ...

  9. Vue框架之基础知识

    在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...

随机推荐

  1. Runnable、Callable、Future和FutureTask用法

    http://www.cnblogs.com/dolphin0520/p/3949310.html java 1.5以前创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable ...

  2. NGINX(六)扩展

    前言 nginx模块化设计, 添加扩展模块变得容易, 下面开发一个非常简单的扩展模块, 实现返回http请求的头部内容, 配置标记是ping_pong, 配置在NGX_HTTP_LOC_CONF中. ...

  3. Jquery+asp.net后台数据传到前台js进行解析的方法

    所以在解析后台数据的时候,我们需要根据后台的数据情况,特殊处理和对待. 我这里后台用的是asp.net提供的wcf服务,也有ashx一般处理程序.大致原理差不多. C#中我们经常用的对象,有实体对象比 ...

  4. duilib中ListCtrl控件的实现

    转载请说明出处,谢谢~~ 昨天在编程群里聊天,提到了ListCtrl,然后有网友找我,他需要做一个ListCtrl控件,我看过需求后接下了这个活.今天就把大致的思路和过程记录一下.首先看<任务书 ...

  5. 傲游浏览器4，傲游浏览器5如何一键批量打开url链接。

    傲游浏览器批量打开网址的插件没用了.有很多网友发了方法也无法实现.实际上,是可以实现傲游浏览器4,傲游浏览器5一键批量打开url链接的.我来告诉大家如何来实现.最新的M5都能使用.在收藏夹添加一个收藏 ...

  6. java Object类学习

    /* * Copyright (c) 1994, 2010, Oracle and/or its affiliates. All rights reserved. * ORACLE PROPRIETA ...

  7. CodeForces 149D Coloring Brackets 区间DP

    http://codeforces.com/problemset/problem/149/D 题意: 给一个给定括号序列,给该括号上色,上色有三个要求 1.只有三种上色方案,不上色,上红色,上蓝色 2 ...

  8. VS2010手动添加外部工具和快捷键

    一.添加外部工具 1.选择工具->外部工具 2.选择添加,然后填相应的程序路径和传给程序的参数. 标题:所创建的工具名字 命令:工具路径 参数:工具命令行参数 初始目录:工具工作目录,有些工具可 ...

  9. Vmware Ubuntu 虚拟机下Android开发环境搭建

    概况: 1.安装jdk: 2.安装adt-bundle: 1.安装jdk 先下载linux下的jdk,我下的是 jdk-7u13-linux-i586 :然后解压,为方便,建个文件夹--/home/x ...

  10. 10 steps to get Ruby on Rails running on Windows with IIS FastCGI- 摘自网络

    Since the original tech preview release of FastCGI last year, we've been seeing a lot of requests fo ...