学习笔记---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. quickly calc pow(i, n) since i in [1~n]

    #include <bits/stdc++.h> using namespace std; #define inf (0x3f3f3f3f) typedef long long int L ...

  2. IONIC 打包安卓apk详细过程

    参照以下链接: https://blog.csdn.net/qq_20264891/article/details/79319408 当 cordova 项目安装的 android 平台版本 与 系统 ...

  3. selenium+Python(Js处理日历控件)

    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用js去掉 ...

  4. 关于table-layout的用法

    定义:tableLayout 属性用来显示表格单元格.行.列的算法规则. 自动表格布局:auto(默认) 在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的. 此算法有时会较慢,这是由 ...

  5. 【Qt开发】更改应用程序图标和任务栏图标

    说明 实际开发过程中,生成的应用文件不会用默认的图标,同时程序启动后任务栏的图标也需要修改,还有窗口的图标,这样显得程序不那么low.更改程序的图标有多种方式,基于Qt Creator或vs开发的方式 ...

  6. linux多线程同步

    1. 互斥量是线程同步的一种机制,用来保护多线程的共享资源.同一时刻,只允许一个线程对临界区进行访问.互斥量的工作流程:创建一个互斥量,把这个互斥量的加锁调用放在临界区的开始位置,解锁调用放到临界区的 ...

  7. Handling of asynchronous events---reference

    http://www.win.tue.nl/~aeb/linux/lk/lk-12.html 12. Handling of asynchronous events One wants to be n ...

  8. step7: 输出到json文件

    调用scrapy自身的Exporter输出 编辑pipeline文件 import json from scrapy.exporters import JsonItemExporter #引入Expo ...

  9. Node.js学习笔记(一) --- HTTP 模块、URL 模块、supervisor 工具

    一.Node.js创建第一个应用 如果我们使用 PHP 来编写后端的代码时,需要 Apache 或者 Nginx 的 HTTP 服务器, 来处理客户端的请求相应.不过对 Node.js 来说,概念完全 ...

  10. [javaEE] EL表达式获取数据

    jsp标签: <jsp:include> <jsp:forward> 实现请求转发 <jsp:param> 给上面的添加参数的 EL表达式: 1.获取变量数据 &l ...