学习笔记---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. php查询某个字段指定值的所有条数

    一.查询某个字段指定值的所有条数 以name叫张三的人为例,查询表中叫张三的人的总数 $where['name']='张三'; $count=M('table')->where($where)- ...

  2. bitset用法

    学习博客:https://www.cnblogs.com/magisk/p/8809922.html C++的 bitset 在 bitset 头文件中,它是一种类似数组的结构,它的每一个元素只能是0 ...

  3. (转)mysql 5.6 原生Online DDL解析

    做MySQL的都知道,数据库操作里面,DDL操作(比如CREATE,DROP,ALTER等)代价是非常高的,特别是在单表上千万的情况下,加个索引或改个列类型,就有可能堵塞整个表的读写. 然后 mysq ...

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

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

  5. java多线程开发，Executors、FutureTask、Callable

    java多线程如何应用呢,几乎学java的同学都知道Thread类和Runable接口.继承Thread类或者实现Runable接口,调用thread的start方法即可启动线程. 然后是线程池,就是 ...

  6. Tomcat与Nginx的整合

    Tomcat与Nginx的整合 环境 操作系统:ubuntu 14.04.4 LTS 安装Nginx 有两种方式,一种是使用apt-get命令来安装二进制版本,另外一种是下载源码后自己编译. 二进制安 ...

  7. Django 入门项目案例开发（中）

    关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. 昨天已经描述了如何搭建Django的开发环境,今天描述业务流程,具体我们要实现一个什么样的业务 ...

  8. SQL Developer 改成英文

  9. 使用connect-multiparty限制nodejs图片上传

    connect-multiparty中间件,可用于获取文件上传时各种参数,比如文件大小.格式等,具体使用: var multipart = require('connect-multiparty'); ...

  10. python模块之matplotlib

    官方网址:http://matplotlib.org/tutorials/introductory/lifecycle.html#sphx-glr-tutorials-introductory-lif ...