JavaScript中实现拖放功能的演示代码
2010-06-25 11:55
696 查看
注意：以下代码在Windows下的IE中得到良好的支持,以外的浏览器不一定支持。
先来看拖动项事件，代码如下：
说明：
当某个项被拖动时，会依次触发以下事件：
(1)dragstart
(2)drag
(3)dragend
接着来看放置目标事件：
说明：
事件触发顺序为：
(1)dragenter
(2)ondragover
若最终移除目标项触发
(3)ondragleave
成功移入则触发
(4)ondrop
创建自己的放置目标：
再来研究下数据传输对象:dataTransfer
再看一下例子：
最后再看看真正的拖动实现代码：
1.数据拖动
2.数据拷贝
3.dragDrop方法演示(可用于几乎所有的HTML元素)
4.URL拖动至浏览器URL并跳转
先来看拖动项事件，代码如下：
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += oEvent.type + "/n";
}
</script>
</head>
<body>
<p>Try dragging the image.</p>
<p><img src="images/smiley.gif" alt=""
ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)"
ondragend="handleDragDropEvent(event)" /></p>
<p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p>
</body>
</html>说明：
当某个项被拖动时，会依次触发以下事件：
(1)dragstart
(2)drag
(3)dragend
接着来看放置目标事件：
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += oEvent.type + "/n";
}
</script>
</head>
<body>
<p>Try dragging the text from the left textbox to the right one.</p>
<p><input type="text" value="drag this text" />
<input type="text" ondragenter="handleDragDropEvent(event)"
ondragover="handleDragDropEvent(event)" ondragleave="handleDragDropEvent(event)"
ondrop="handleDragDropEvent(event)" /></p>
<p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p>
</body>
</html>说明：
事件触发顺序为：
(1)dragenter
(2)ondragover
若最终移除目标项触发
(3)ondragleave
成功移入则触发
(4)ondrop
创建自己的放置目标：
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
var oTextbox = document.getElementById("txt1");
oTextbox.value += oEvent.type + "/n";
//创建自己的放置目标
switch(oEvent.type) {
case "dragover":
case "dragenter":
oEvent.returnValue = false;
}
//创建自己的放置目标
}
</script>
</head>
<body>
<p>Try dragging the text from the textbox to the red square.
Drop target events fire now.</p>
<p><input type="text" value="drag this text"
ondragstart="handleDragDropEvent(event)" ondrag="handleDragDropEvent(event)"
ondragend="handleDragDropEvent(event)" />
<div style="background-color: red; height: 100px; width: 100px"
ondragenter="handleDragDropEvent(event)" ondragover="handleDragDropEvent(event)"
ondragleave="handleDragDropEvent(event)" ondrop="handleDragDropEvent(event)"></div></p>
<p><textarea rows="10" cols="25" readonly="readonly" id="txt1"></textarea></p>
</body>
</html>再来研究下数据传输对象:dataTransfer
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
switch(oEvent.type) {
case "dragover":
case "dragenter":
oEvent.returnValue = false;
break;
case "drop":
alert(oEvent.dataTransfer.getData("text"));
}
}
</script>
</head>
<body>
<p>Try dragging the text from the textbox to the red square.
It will show you the selected text when dropped.</p>
<p><input type="text" value="drag this text" />
<div style="background-color: red; height: 100px; width: 100px"
ondragenter="handleDragDropEvent(event)"
ondragover="handleDragDropEvent(event)"
ondrop="handleDragDropEvent(event)"></div></p>
</body>
</html>再看一下例子：
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
switch(oEvent.type) {
case "dragover":
case "dragenter":
oEvent.returnValue = false;
break;
case "drop":
alert(oEvent.dataTransfer.getData("URL"));
}
}
</script>
</head>
<body>
<p>Try dragging the link to the red square.
It will show you the URL when dropped.</p>
<p><a href="http://www.wrox.com" target="_blank">Wrox Home Page</a>
<div style="background-color: red; height: 100px; width: 100px"
ondragenter="handleDragDropEvent(event)"
ondragover="handleDragDropEvent(event)"
ondrop="handleDragDropEvent(event)"></div></p>
</body>
</html>最后再看看真正的拖动实现代码：
1.数据拖动
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropoEvent(oEvent) {
switch(oEvent.type) {
case "dragstart":
oEvent.dataTransfer.effectAllowed = "move";
break;
case "dragenter":
oEvent.dataTransfer.dropEffect = "move";
break;
case "dragover":
oEvent.returnValue = false;
break;
case "drop":
oEvent.returnValue = false;
oEvent.srcElement.innerHTML = oEvent.dataTransfer.getData("text");
}
}
</script>
</head>
<body>
<p>Try dragging the text in the textbox to the red square.
The text will be "moved" to the red square.</p>
<p><input type="text" value="drag this text" ondragstart="handleDragDropoEvent(event)" />
<div style="background-color: red; height: 100px; width: 100px"
ondragenter="handleDragDropoEvent(event)"
ondragover="handleDragDropoEvent(event)"
ondrop="handleDragDropoEvent(event)"></div>
</p>
</body>
</html>2.数据拷贝
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleDragDropEvent(oEvent) {
switch(oEvent.type) {
case "dragstart":
oEvent.dataTransfer.effectAllowed = "copy";
break;
case "dragenter":
oEvent.dataTransfer.dropEffect = "copy";
oEvent.returnValue = false;
break;
case "dragover":
oEvent.returnValue = false;
break;
case "drop":
oEvent.returnValue = false;
oEvent.srcElement.innerHTML = oEvent.dataTransfer.getData("text");
}
}
</script>
</head>
<body>
<p>Try dragging the text in the textbox to the red square.
The text will be "copied" to the red square.</p>
<p><input type="text" value="drag this text" ondragstart="handleDragDropEvent(event)" />
<div style="background-color: red; height: 100px; width: 100px"
ondragenter="handleDragDropEvent(event)"
ondragover="handleDragDropEvent(event)"
ondrop="handleDragDropEvent(event)"></div>
</p>
</body>
</html>3.dragDrop方法演示(可用于几乎所有的HTML元素)
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleMouseMove(oEvent) {
if (oEvent.button == 1) {
oEvent.srcElement.dragDrop();
}
}
function handleDragDropEvent(oEvent) {
oEvent.dataTransfer.setData("text", "This is a red square");
}
</script>
</head>
<body>
<p>Try dragging the red square into the textbox.</p>
<p><div style="background-color: red; height: 100px; width: 100px"
onmousemove="handleMouseMove(event)"
ondragstart="handleDragDropEvent(event)">This is a red square</div> </p>
<p><input type="text" value="" /></p>
</body>
</html>4.URL拖动至浏览器URL并跳转
<html>
<head>
<title>System Drag And Drop Example</title>
<script type="text/javascript">
function handleMouseMove(oEvent) {
if (oEvent.button == 1) {
oEvent.srcElement.dragDrop();
}
}
function handleDragDropEvent(oEvent) {
oEvent.dataTransfer.setData("URL", "http://www.wrox.com/");
}
</script>
</head>
<body>
<p>Try dragging the red square into another browser window.</p>
<p><div style="background-color: red; height: 100px; width: 100px"
onmousemove="handleMouseMove(event)"
ondragstart="handleDragDropEvent(event)">http://www.wrox.com</div> </p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript中使用zDragDrop实现拖放功能
- javascript 拖放效果实现代码
- 使用JavaScript动态设置样式实现代码及演示动画
- JavaScript截屏功能的实现代码
- 为JavaScript类型增加方法的实现代码(增加功能)
- javascript 全选与全取消功能的实现代码
- ASP.NET中服务器控件Button调用javascript代码运用正则表达式验证TextBox中输入的是否为正整数或正小数，符合要求则继续运行服务器端代码功能的实现
- javascript 变速加数功能实现代码
- Android工具HierarchyViewer 代码导读(1) -- 功能实现演示
- Javascript实现代码折叠功能
- JavaScript实现邮箱地址自动匹配功能代码
- javascript倒计时功能实现代码
- javascript 拖放效果实现代码
- ASP.NET实现word文档在线预览功能代码-JavaScript编程
- 代码实现打印功能(asp.net+javascript)
- 简单几行javascript代码，实现动态倒计时功能
- Arcgis for javascript API代码实现TimeSlider功能
- JavaScript蒙板(model)功能的简单实现代码
- 【JavaScript】富文本编辑器UEditor与代码高亮插件SyntaxHighlighter整合，实现用户贴代码功能
- JavaScript中实现map功能代码分享