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

最新推荐文章于 2023-10-04 11:08:18 发布

weixin_34327761

最新推荐文章于 2023-10-04 11:08:18 发布

阅读量128

点赞数

文章标签： javascript xhtml ViewUI

本文介绍了JavaScript中事件处理的基本属性及方法，并详细讲解了如何实现拖放功能，包括设置拖放对象、目的对象的事件处理及数据传递方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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