学习笔记---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：

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< 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 >