您的位置：首页 > Web前端 > JavaScript

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

2010-12-02 23:25 751 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航