学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---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> <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"> </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浏览器下的拖拽效果

相关文章