学习笔记---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">&nbsp;</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浏览器下的拖拽效果的更多相关文章

  1. jquery监听事件on写法以及简单的拖拽效果

    引子——关于jquery的某些写法 我先不对监听事件做解释,我们先来看下jquery的一些写法吧!我们最常用的是jquery的css()方法,相信大家都会用! 假如用css设置一个属性,我们写法如下: ...

  2. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

  3. Javascript 事件对象进阶（二）拖拽的应用 - 登录框的拖拽

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Javascript 事件对象进阶（一）拖拽的原理

    拖拽原理 鼠标和Div的相对距离不变 三大事件 把拖拽加到document上 拖拽简单点来说就是不停的更改物体到页面左边&顶部的距离! 那么如何计算出物体到页面左端的距离呢? 当鼠标按下的时候 ...

  5. Swift2.0下UICollectionViews拖拽效果的实现

    文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...

  6. JavaScript实现最简单的拖拽效果

    一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...

  7. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  8. iOS学习笔记--触摸事件

    最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...

  9. docker学习笔记（一）—— ubuntu16.04下安装docker

    docker学习笔记(一)—— ubuntu16.04下安装docker 原创 2018年03月01日 14:53:00 标签: docker / ubuntu 1682 本文开发环境为Ubuntu ...

随机推荐

  1. React 的 server render 初步学习

    所谓server render 即服务端渲染,这是为了解决现代前端框架下的单页应用在SEO方面不友好的问题. react 的SSR主要思路就是 1.将应用的根组件导出 如 <App /> ...

  2. Anaconda环境变量配置问题解决

    (右键)我的电脑==>属性==>高级系统设置==>环境变量==>Path 按照下图添加: 总共4个,如果出现“此环境变量太大...”,删除或者缩短其他环境变量地址. 然后重新打 ...

  3. unittest实现批量处理测试集

    批量执行测试集 #coding=utf-8 from selenium import webdriver from selenium.webdriver.common.by import By fro ...

  4. C 标准库 - string.h之strspn使用

    strspn Returns the length of the initial portion of str1 which consists only of characters that are ...

  5. PHP发送返回404状态码

    1. 默认的由Apache自动处理的404 修改Aache的配置文件 httpd.conf 中的 ErrorDocument 404 /404.html 或者使用 .htaccess文件,同时有要把 ...

  6. Redis云端架构深入浅出

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯云数据库 TencentDB 发表于云+社区专栏 作者介绍:邹鹏,腾讯云数据库Redis产品负责人,多年数据库.网络安全研发经验. ...

  7. SQL Developer 改成英文

  8. JavaScript中的异步 macrotask 和 microtask

    看过很多setTimeout.Promise执行顺序的面试题,一直不明白为啥都是异步操作,Promise就牛×些呢?直到了解了macrotask和micromask才恍然大悟... 先来一道面试题助助 ...

  9. 正排索引(forward index)与倒排索引(inverted index)

    正常的索引一般是指关系型数据库里的索引. 把不同的数据存放到不同的字段中.如果要实现baidu或google那种搜索,就需要与一条记录的多个字段进行比对,需要 全表扫描,如果数据量比较大的话,性能就很 ...

  10. javascript进行base64加密，解密

    function Base64() { // private property _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr ...