h5拖放-基础知识
<!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拖放-基础知识的更多相关文章
- HTML基础知识
一个完美的web前端攻城狮,所具备的专业素养有:HTML5.XHTML.CSS3.JavaScript.JQuery.PS.PHP等.所以说,我要学的东西还有很多... 没别得,我也是一个H5的初学者 ...
- 基础知识漫谈（2）：从设计UI框架开始
说UI能延展出一丢丢的东西来,光java就有swing,swt/jface乃至javafx等等UI toolkit,在桌面上它们甚至都不是主流,在web端又有canvas.svg等等. 基于这些UI工 ...
- HTML基础知识总结
经过这段时间的学习,对于html的一些基础知识有了一定的了解.所谓好记性不如烂笔头,唯有一点点累积,才能汇聚成知识的海洋.现在,我对这段时间的学习做一个总结. 一.HTML的定义 HTML,超文本标记 ...
- Runloop基础知识
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 【CSS】 CSS基础知识 属性和选择
css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...
- 背水一战 Windows 10 (56) - 控件（集合类）: ListViewBase - 基础知识, 拖动项
[源码下载] 背水一战 Windows 10 (56) - 控件(集合类): ListViewBase - 基础知识, 拖动项 作者:webabcd 介绍背水一战 Windows 10 之 控件(集合 ...
- 移动端头部适配 meta基础知识
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-wid ...
- 16第一章 ASP.Net编程基础知识
第一章 ASP.Net编程基础知识 第一章 ASP.Net编程基础知识 本章首先介绍用ASP.Net技术编制服务器端动态网页所需的网络和HTML标记语言方面的有关知识.然后 ...
- Vue框架之基础知识
在没有学习基础知识之前,我们需要下载vue的js文件,在使用vue语法之前引包 <script src='./vue.js'></script> 一.模板语法 模板语法是一种可 ...
随机推荐
- ubuntu设置ip和dns
装完ubuntu 第一件事情就是连上网,换个源,进行更新操作,但前提条件是要配好ip和dns. 下面把自己配置的过程记录下来,权且当作一份备份,以便不时之需. 一.配置ip ub ...
- HDU 1075-What Are You Talking About（Trie）
题意: 给你一个字典 一个英文单词对应一个火星单词 给你一段火星文翻译成英文 字典上的没有的不翻译 分析: 没有给数据规模 字典树用链表 #include <map> #include & ...
- Spring 拦截器配置
Spring interceptor拦截器配置 Spring mvc的拦截器是通过handlerinterceptor来实现的 实现方式: 1.自定义一个类实现Spring的handlerinterc ...
- JS 框架之我感
对于一些js框架在我看来,都是将前端的表现动态化,即用动态js把html加载到页面上,如angularJS的MVVM开发模式(已接触),ReactJS的View层组件化(学习中),还有一些只听过没见过 ...
- 数据库设置表的check约束出现乱码
采用默认的方式见了一个数据库,但是有个表里需要建一个check约束.将约束保存之后再打开看到中文成了??.后来查了一下是数据库排序规则除了问题. 详见两图即可明白: 这里的约束中文显示乱码: 按下图设 ...
- c++拼接字符串效率比较（+=、append、stringstream、sprintf）
转自:http://www.cnblogs.com/james6176/p/3222671.html c++拼接字符串效率比较(+=.append.stringstream.sprintf) 最近写的 ...
- fscanf（格式化字符串输入）
fscanf(格式化字符串输入) 相关函数 scanf,sscanf 表头文件 #include<stdio.h> 定义函数 int fscanf(FILE * stream ,const ...
- PCB编辑快捷键
TAB: 调节属性PgUp: 放大PgDn: 缩小Delete: 删除Ctrl+C: 复制Ctrl+V: 粘贴Ctrl+X: 剪贴Ctrl+Z: 撤销Ctrl+Y: 取消撤销Ctrl+F: 查找Ctr ...
- webServices
引用项目的配置文件: <system.serviceModel> <bindings> <basicHttpBinding> <!--旅游供应--> & ...
- MSSQLSERVER数据库- 配置数据库邮件配置的操作过程
还是第一次发现数据库可以发邮件.查了一下百度,试了一下,发现可以. 1.简单了解数据库邮件的概念和使用的传输协议及系统体系: 数据库邮件是从 SQL Server 数据库引擎中发送电子邮件的企业解决方 ...