页面拖拽操作不完全版(待续)

来源：互联网发布：java神经网络源代码编辑：程序博客网时间：2024/05/27 02:33

【目标】实现鼠标拖拽功能.
【未实现】

【源码】

<html>
2

<head>
3

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

//触发拖拽事件
20

function fireDrag()
21

{
22

//创建一个span对象
23

sp=document.createElement("span");
24

sp.innerHTML="new";
25

var eventSource=event.srcElement;
27

eventSource=eventSource.offsetParent;
28

eventSource.dragDrop();
29

}
30

//拖拽中事件
32

function draging()
33

{
34

document.body.appendChild(sp);
35

}
36

//拖拽结束事件
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>