学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作)、srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...});
2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用event.returnValue = false;来完成.
b. 被移动对象事件: dragstart(按下鼠标并开始移动时触发)、drag(移动过程中连续触发)、dragend(松开鼠标, 停止拖放触发)
c. 目的对象事件: dragenter(被拖放对象进入目的对象的范围时触发)、dragover(被拖放对象在目的对象的范围时连续触发)、dragleave(被拖放对象移出目的对象范围时触发)、drop(被拖放对象在目的对象内放下时触发)
d. 被移动对象与目的对象之间的数据传递: 通过dataTransfer属性来完成(只能传递"字符串、URL"), 可以通过setData("text")和getData("URL")来保存和获取数据. 注意: 重复调用setData("text")将覆盖旧数据.
如: event.dataTransfer.setData("text","北京您好");event.dataTransfer.setData("URL",http://www.baidu.com);
存储在dataTransfer中的数据在drop事件触发之前可以, drop事件触发之后将被抛弃掉; 当从文本框中拖动文本是, 将自动调用setData("text")来保存.
e. 通过dataTransfer对象在目标对象上设置"放置时的影响或效果": 通过dropEffect实现且必须在ondragenter事件中进行处理.
none: 不能放置、move: 内容转移、copy: 内容复制、link: 目标将浏览被拖动的URL中的内容.
f. 在被移动的对象上, 还需要设置effectAllowed属性, 且必须在ondragstart事件中处理. 该属性用于表示被拖动的对象允许哪种dropEffect.
可能值: uninitialized: 无任何动作、none: 不允许有任何动作、copy(允许copy)、link、move、copyLink(允许copy和link)、copyMove、linkMove、all
g. 若要实现从对象A拖放到对象B上, 则需要同时设置dropEffect和effectAllowed为move.
//javascript - Event:
代码
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title></head><body> <input id="Text1" type="text" value="必须输入内容! " minLength="2" onfocus="textFocus();" onblur="textBlur();" onkeypress="textCheck();"/> <input id="Button1" type="button" value="button" onclick="javascript:alert('ButtonClick事件');" /> <br /> <hr /> <br /> <span onclick="spanClick();" style="cursor:hand">span标记</span><!--通过修改style的cursor属性, 使span具有手形--> <br /> <hr /> <br /> <textarea id="TextArea" cols="20" rows="5" ondragenter="javascript:window.event.returnValue = false;" ondragover="javascript:window.event.returnValue = false" ondrop="dropText();"></textarea><span style="width:100"> </span><span id="srcTxt" ondragstart="moveText();">北京欢迎您!</span> <div> <script type="text/javascript"> function textFocus(eventObject) { alert("这里获得了焦点! "); var eventObj = eventObject || window.event; //获得火狐或者IE的事件对象 var source = eventObj.srcElement; //获得事件源 source.value = ""; } function textBlur(eventObject) { alert("焦点离开! "); var eventObj = eventObject || window.event; var source = eventObj.srcElement; var min = parseInt(source.minLength); //alert(min); if (source.value.length < min) { source.style.backgroundColor = "Red"; } else { source.style.backgroundColor = "White"; } } function textCheck(eventObject) { var eventObj = eventObject || window.event; var code = eventObj.keyCode; if (!(code >= 48 && code <= 57)) { eventObj.returnValue = false; //returnValue, 设置或获取事件的返回值 } } function spanClick(eventObject) { var eventObj = eventObject || window.event; var source = eventObj.srcElement; if (source.innerText == "span标记") { source.innerHTML = "span被点击啦!"; } else { source.innerHTML = "span标记"; } } //实现拖放 function moveText(eventObject) { var eventObj = eventObject || window.event; var datatrans = eventObj.dataTransfer; //dataTransfer为数据传输对象 datatrans.effectAllowed = "copy"; var source = eventObj.srcElement; datatrans.setData("text", source.innerText); //alert(datatrans.getData("text")); } function dropText(eventObject) { var eventObj = eventObject || window.event; var datatrans = eventObj.dataTransfer; datatrans.dropEffect = "copy"; var source = eventObj.srcElement; var txt = datatrans.getData("text") + "\n"; //alert(txt+"s"); source.value += txt; } </script> </div></body></html>
学习笔记---Javascript事件Event、IE浏览器下的拖拽效果的更多相关文章
- jquery监听事件on写法以及简单的拖拽效果
引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...
- [JS学习笔记]Javascript事件阶段:捕获、目标、冒泡
当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...
- Javascript 事件对象进阶(二)拖拽的应用 - 登录框的拖拽
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Javascript 事件对象进阶(一)拖拽的原理
拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离! 那么如何计算出物体到页面左端的距离呢? 当鼠标按下的时候 ...
- Swift2.0下UICollectionViews拖拽效果的实现
文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- JS学习笔记9之event事件及其他事件
-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...
- iOS学习笔记--触摸事件
最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...
- docker学习笔记(一)—— ubuntu16.04下安装docker
docker学习笔记(一)—— ubuntu16.04下安装docker 原创 2018年03月01日 14:53:00 标签: docker / ubuntu 1682 本文开发环境为Ubuntu ...
随机推荐
- Servlet入门小案例
案例一:tomcat9.jdk1.8 1.eclipse创建web项目 1)创建一个Dynamic web project,名字为Servlet_hjh 2)在src下创建一个包,为com.hjh.d ...
- 如何让一个div居于页面正中间
如何让一个div居于页面正中间 如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,le ...
- php查询某个字段指定值的所有条数
一.查询某个字段指定值的所有条数 以name叫张三的人为例,查询表中叫张三的人的总数 $where['name']='张三'; $count=M('table')->where($where)- ...
- python pandas使用一些协程
import pandas as pd def coroutine(func): """装饰器:向前执行到第一个`yield`表达式,预激`func`"&quo ...
- MCD的正确格式
[[99NN/etWLLP/33qnzb/eMNf5mwlh9hUsT+FYsTIU15REWiQd99vwIyZqDUDIRtvsgCP0BXDlvHJlbDR+NPhyL50wS2ThIiEwD/ ...
- Getting over the dangers of rm command in Linux---reference
reference:http://www.coolcoder.in/2014/01/getting-over-dangers-of-rm-command-in.html When we want to ...
- Scrapy框架学习(一)Scrapy框架介绍
Scrapy框架的架构图如上. Scrapy中的数据流由引擎控制,数据流的过程如下: 1.Engine打开一个网站,找到处理该网站的Spider,并向该Spider请求第一个要爬取得URL. 2.En ...
- 【HTML基础】表格和表单
本次博客的主要内容如下: meta和link 表格 表单 meta和link meta meta的属性有两种:name和http-equiv. name属性主要用于描述网页内容,对应与网页内容. 1. ...
- java中wait和notify的关系
java中,wait和notify这两个方法是一对,wait方法阻塞当前线程,而notify是唤醒被wait方法阻塞的线程. 首先,需要说明的是,wait和notify方法都是Object的实 ...
- Magento 2开发教程 - 如何添加新产品属性
添加产品属性是一种在Magento 1 和 Magento 2最受欢迎的业务. 属性是解决许多与产品相关的实际任务的有力方法. 这是一个相当广泛的话题,但在这个视频中,我们将讨论添加一个下拉类型属性到 ...