本文介绍了一种使用JScript实现鼠标拖拽功能的方法。通过为页面中的表格元素添加mousedown、drag和dragend事件，实现了元素的拖拽效果。具体步骤包括创建一个span对象并在拖拽过程中将其添加到body中。
【目标】实现鼠标拖拽功能.
【未实现】
【源码】
【未实现】
【源码】
1
<html>
2 <head>
3
<script language="JScript">
4
<!--
5 var sp;
6 //遍历所有子table,添加拖拽事件
7 function addEvent()
8
{
9 var tables=document.getElementsByTagName("table");
10 var sum=tables.length;
11 for(var i=1;i<parseInt(sum);i++)
12 {
13 tables[i].rows[0].attachEvent("onmousedown",fireDrag);
14 tables[i].attachEvent("ondrag",draging);
15 tables[i].attachEvent("ondragend",dragEnd);
16
}
17 }
18
19 //触发拖拽事件
20 function fireDrag()
21 {
22 //创建一个span对象
23 sp=document.createElement("span");
24 sp.innerHTML="new";
25
26 var eventSource=event.srcElement;
27 eventSource=eventSource.offsetParent;
28 eventSource.dragDrop();
29 }
30
31 //拖拽中事件
32 function draging()
33 {
34 document.body.appendChild(sp);
35 }
36
37 //拖拽结束事件
38 function dragEnd()
39 {
40 alert("拖拽结束!");
41 }
42 //-->
43
</script>
44 </head>
45 <body onload="addEvent()">
46 <table border="1" cellpadding="0" cellspacing="10" width="100%" height=200 id="parentTable">
47 <tr>
48 <td width="50%">
49 <table id ="t1" border=1 cellspacing="0">
50 <tr>
51 <td>AX's blog --id:t1</td>
52 </tr>
53 <tr>
54 <td id="td1">hello</td>
55 </tr>
56 </table>
57 </td>
58 <td width="50%">
59 <table id ="t2" border=1 cellspacing="0">
60 <tr>
61 <td>keso's blog --id:t2</td>
62 </tr>
63 <tr>
64 <td id="td2">world</td>
65 </tr>
66 </table>
67 </td>
68 </tr>
69 </table>
70 </body>
71</html>
<html>2
<head>3
<script language="JScript">4
<!--5
var sp;6
//遍历所有子table,添加拖拽事件7
function addEvent()8
{9
var tables=document.getElementsByTagName("table");10
var sum=tables.length; 11
for(var i=1;i<parseInt(sum);i++)12
{13
tables[i].rows[0].attachEvent("onmousedown",fireDrag);14
tables[i].attachEvent("ondrag",draging);15
tables[i].attachEvent("ondragend",dragEnd);16
}17
}18
19
//触发拖拽事件20
function fireDrag()21
{22
//创建一个span对象23
sp=document.createElement("span");24
sp.innerHTML="new"; 25
26
var eventSource=event.srcElement;27
eventSource=eventSource.offsetParent; 28
eventSource.dragDrop(); 29
}30
31
//拖拽中事件32
function draging()33
{34
document.body.appendChild(sp);35
}36
37
//拖拽结束事件38
function dragEnd()39
{ 40
alert("拖拽结束!");41
}42
//-->43
</script>44
</head>45
<body onload="addEvent()">46
<table border="1" cellpadding="0" cellspacing="10" width="100%" height=200 id="parentTable">47
<tr>48
<td width="50%">49
<table id ="t1" border=1 cellspacing="0">50
<tr>51
<td>AX's blog --id:t1</td>52
</tr>53
<tr>54
<td id="td1">hello</td>55
</tr>56
</table>57
</td>58
<td width="50%">59
<table id ="t2" border=1 cellspacing="0">60
<tr>61
<td>keso's blog --id:t2</td>62
</tr>63
<tr>64
<td id="td2">world</td>65
</tr>66
</table>67
</td>68
</tr>69
</table>70
</body>71
</html>
扫一扫
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
