学习笔记---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. ORACLE MERGE INTO UPDATE DELETE 用法

    ORACLE MERGE INTO UPDATE DELETE 用法 使用该MERGE语句从一个或多个源中选择行以进行更新或插入表或视图.您可以指定条件以确定是更新还是插入目标表或视图. 此语句是组合 ...

  2. Python学习 day13

    一.可迭代对象和迭代器 1.回顾可以被for循环的对象 list.dic.str.set.tuple.文件句柄f.range().enumerate() 只有可迭代对象才能被for循环,当我们遇到一个 ...

  3. init_config_file.lua

    --[[ 读取限流配置 --]] --获取共享内存 local limit_req_store = ngx.shared.limit_req_store --初始化拒绝 URI 列表 reject_u ...

  4. SystemVerilog中枚举类型注意事项

    enum logic {a = 'bx, d = 1'bz}; 在SystemVerilog枚举类型中当使用logic进行声明时,注意logic为四态,所以当使用时如果声明时需要x.z态需要显式声明. ...

  5. 2014年北京网络赛 Instrusive HDU 5040 题解 优先队列

    网赛的时候看了这道题,发现就是平常的那种基础搜索题. 由于加了一个特殊条件:可以一次消耗3秒或原地停留1秒. 那就不能使用简单的队列了,需要使用优先队列才行. 题意 告诉一副地图:一个起点,一个终点, ...

  6. C 标准库 - string.h之strlen使用

    strlen Returns the length of the C string str. The length of a C string is determined by the termina ...

  7. 使用Chrome console提取页面数据

    使用Chrome console提取页面数据 1.需求介绍 在做课题研究的过程中,遇到这样一个问题,有一个页面中包含很多IP地址,需要把这些IP地址提取出来保存到文件中.如下图所示: 一开始的做法是一 ...

  8. easyui焦点离开事件的解决方案

  9. spring框架笔记

    Spring实现依赖注入的两种方式: 1.构造方法注入 2.set方法注入,p标签注入 Spring中事务的两种实现方式: 编程式事务管理 声明式事务管理(推荐) Spring增强类型: Before ...

  10. DIV固定宽度和动态拉伸混合水平排列

    1.效果图 2.源代码 html <h2>1.头部固定,尾部拉伸</h2> <div class="container" id="div1& ...