学习笔记---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. [前后端分离项目]thinkphp返回给前端数据为字符串

    写在前面:现在项目大多是采用前后端分离的模式进行开发,这种模式下的开发大大的提高了工作效率,而进行前后端数据交互传输的格式基本以json为主,毕业设计中兼顾前端开发和后端开发(后端小白一个),前端业务 ...

  2. Python学习 day14

    一.生成器函数进阶 1.最后一个yield后的代码 先看示例: def generator(): print(123) yield 'a' print(456) yield 'b' print(789 ...

  3. 06-oracle 通用函数

    --nvl(数字|列名,默认值) 数字或列的值为null显示为0,不为null时显示原值 --nvl2(comm,comm,0)如果comm不为null则显示comm,为null则显示0 --null ...

  4. Oracle Schema

    1.这是Schema的definition: A schema is a collection of database objects (used by a user.) Schema objects ...

  5. Missy

    毕业两年了,非常怀念大学生活.有时间还想回去看看,为什么我的眼里常含着泪水,因为我对这片土地爱的深沉. 你问我大学时最后悔的事情是什么,可能是没有对她说 I like you 吧,至今偶尔也会想起她. ...

  6. java中四种引用类型（对象的强、软、弱和虚引用）

    对象的强.软.弱和虚引用在JDK 1.2以前的版本中,若一个对象不被任何变量引用,那么程序就无法再使用这个对象.也就是说,只有对象处于可触及(reachable)状态,程序才能使用它.从JDK 1.2 ...

  7. Splunk大数据分析经验分享

    转自:http://www.freebuf.com/articles/database/123006.html Splunk大数据分析经验分享:从入门到夺门而逃 Porsche 2016-12-19 ...

  8. WP手机短信导出方法和MSG格式文件阅读器的实现

    最近想起来自己一直扔在抽屉里的Nokia920T里还存着珍贵的短信,觉得把它导出来存到电脑上比较稳妥也方便阅读.经过搜索找到一下方法:到应用市场里搜索contacts+message backup,安 ...

  9. Asp.net MVC5系列——第一个项目

    转自http://www.cnblogs.com/wolf-sun/p/3888160.html 概述 在这一部分我们添加一个新的控制器HelloWorldController类,以便使用视图来向客户 ...

  10. [android] 天气app布局练习（四）

    主要练习一下获取网络数据和解析xml MainActivity.java package com.example.weatherreport; import java.io.UnsupportedEn ...