指定した位置にドラッグ&ドロップ
13000 ワード
divは効果がなく、HTML 5がサポートしていないかどうか分かりません.
IMG画像OK
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <style type="text/css">
5 html{background-color:white; height:100%;}
<!-- -->
6 body{background-color:#eee; height:100%; margin:0px;}
7 </style>
8
9 <script type="text/javascript">
10 function allowDrop(ev)
11 {
12 ev.preventDefault();
13 }
14
15 function drag(ev)
16 {
17 ev.dataTransfer.setData("Text",ev.target.id);
18 }
19
20 function drop(ev)
21 {
22 ev.preventDefault();
23 var data=ev.dataTransfer.getData("Text");
24 ev.target.appendChild(document.getElementById(data));
25 //alert(data);
26 var obj=document.getElementById(data);
27 droppoint(ev,obj);
28 }
29
30 function droppoint(e,obj){
31 var x=""+event.clientX+"px";
32 var y=""+event.clientY+"px";
33 pset(x,y,obj);
34 }
35
36 function pset(left,top,obj){
37 obj.style.position = "absolute";
38 obj.style.left = left;
39 obj.style.top = top;
40 }
41
42 </script>
43 </head>
44
45 <body ondrop="drop(event)" ondragover="allowDrop(event)">
46
47 <div align="center" style="top:200px;font-size:50px">drag and drop</div>
48 <!--
49 <div id="drag1" style="position:absolute;width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;background-color:green;" draggable="true" ondragstart="drop(event)" ></div>
50 -->
51
52 <!-- -->
53 <img id="drag2" src="C:\Documents and Settings\rojas\My Documents\My Pictures\download.ico" draggable="true" ondragstart="drag(event)" />
54
55 </body>
56 </html>