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> 一.模板语法 模板语法是一种可 ...
随机推荐
- POJ 2488 A Knight's Journey
题意:给一个n×m的棋盘,如果一个骑士可以从任意一个位置出发不重复的走遍棋盘的每个格子就输出字典序最短的路径. 解法:dfs.暴搜n×m次,只是被字典序输出坑了……而且字母是列序号数字是行序号……这两 ...
- 发送一个简单的HTTP GET请求并且取回响应。
string uri="http//www.baidu.com"; WebClient wc = new WebClient(); Console.WriteLine(" ...
- 在MFC框架中使用OpenGL的简单实例
引言 我们知道,在MFC框架中,用于绘图的接口是GDI.但GDI只能绘制简单的2D图形,要想制作精美的3D图形,一个可行的办法是使用OpenGL或者Direct3D等第三方库. 由于最近在给导师的一个 ...
- Nginx负载均衡SFTP
1.CentOS安装SFTP,参考 2.Nginx-1.8.1 下载 ,Nginx_TCP插件 下载 3.安装Nginx [root@localhost nginx-1.8.1]# yum -y in ...
- 使用weka进行Cross-validation实验
Generating cross-validation folds (Java approach) 文献: http://weka.wikispaces.com/Generating+cross-va ...
- jQuery.Autocomplete实现自动完成功能
一.http://www.w3c.com.cn/jquery-plugin-autocomplete-参数及实例 二.jQuery plugin: Autocomplete 参数 minChars: ...
- 检测是否安装了 .NET Framework 3.5
此脚本是为 Internet Explorer 设计的. 其他浏览器可能在 UserAgent 字符串中不包含 .NET CLR 信息. <HTML> <HEAD> &l ...
- HDU-4704 Sum 大数幂取模
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4704 题意:求a^n%m的结果,其中n为大数. S(1)+S(2)+...+S(N)等于2^(n-1) ...
- POJ-3714 Raid 平面最近点对
题目链接:http://poj.org/problem?id=3714 分治算法修改该为两个点集的情况就可以了,加一个标记... //STATUS:C++_AC_2094MS_4880KB #incl ...
- Windows下Android SDK Manage下载速度缓慢的解决方法
在SDK Manager下Tools->Options打开了SDK Manager的Settings,选中“Force https://… sources to be fetched using ...