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> 一.模板语法 模板语法是一种可 ...
随机推荐
- Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别?
一个帖子的整理: Handler一定要在主线程实例化吗?new Handler()和new Handler(Looper.getMainLooper())的区别如果你不带参数的实例化:Handler ...
- selenium Grid
Selenium Grid 的机制是启动一个 hub,然后启动多个 Selenium RC 注册到 hub 上, 当测试请求到 hub 时,hub 会将测试分发给 Selenium RC, Selen ...
- 不适用临时空间,交换变量a和b
方法1: a = a + b; b = a - b; a = a - b; 方法2: a ^= b; b ^= a; a ^= b; 方法3: a = a * b; b = a / b; a = a ...
- HW6.13
import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...
- leetcode@ [318] Maximum Product of Word Lengths (Bit Manipulations)
https://leetcode.com/problems/maximum-product-of-word-lengths/ Given a string array words, find the ...
- Ubuntu下部署SVN+SVNManager
本文参考了一下博客,特此感谢: 灰烬之灵 一米阳光做IT.测试 环境描述:ubuntu 13.04 1.先创建svn组和svn用户: sudo addgroup svnsudo useradd ...
- Android实例-程序界面内截取屏幕(XE8+小米2)
结果: 1.只能截取程序界面内的图片. 2.图片有点不清楚,自己设置清楚度. 实例代码: unit Unit1; interface uses System.SysUtils, System.Type ...
- Android实例-使用电话拨号器在移动设备上(官方)(XE8+小米2)
源文地址: http://docwiki.embarcadero.com/RADStudio/XE5/en/Mobile_Tutorial:_Using_the_Phone_Dialer_on_Mob ...
- python 使用模块
Python本身就内置了很多非常有用的模块,只要安装完毕,这些模块就可以立刻使用. 我们以内建的sys模块为例,编写一个hello的模块: #!/usr/bin/env python # -*- co ...
- light oj 1078 - Integer Divisibility
1078 - Integer Divisibility PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 3 ...