js仿windows文件与文件夹处理

前段时间有朋友问:拖拽一个容器(比如说div,姑且命名为‘file’)到当前页面中任意的一个div(命名为'folder')里边,然后删除当前节点。效果就是把一个文件放到一个文件夹里,跟windows里扔一个文件到文件夹一样

如何实现?

....................................华丽的分隔线......................................

代码实现如下:

 

js仿windows文件与文件夹处理 View Code
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5 <title>文件拖拽</title>

 6 <style type="text/css">

 7 #main div{position:absolute;width:220px;height:150px;border:1px solid #999;}

 8 </style>

 9 <script type="text/javascript">

10 //全局对象

11 var a=null,pid;

12 //获取元素

13 function $(id){

14 return document.getElementById(id);

15 }

16 //获取最大的zIndex

17 function getMaxIndex(){

18 var index=0,

19 ds = $(pid).getElementsByTagName('div'),

20 l = $(pid).getElementsByTagName('div').length;

21 for (var i=0;i<l;i++)

22 {

23 if (ds[i].style.zIndex>index) index=ds[i].style.zIndex;

24 }

25 return index;

26 }

27 document.onmouseup=function(){

28 var dlist = $(pid).getElementsByTagName('div'),//

29 len = $(pid).getElementsByTagName('div').length;

30 if(!a)return;

31 document.all?a.releaseCapture():window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);//兼容IE与ff

32 var centerX = parseInt(a.style.left),

33 centerY = parseInt(a.style.top);

34 for (var i=0;i<len-1;i++)

35 {

36 var tTop = parseInt($(dlist[i].id).style.top.replace("px","")),

37 tLeft = parseInt($(dlist[i].id).style.left.replace("px","")),

38 tRight = parseInt($(dlist[i].id).style.left.replace("px",""))+$(dlist[i].id).offsetWidth,

39 tBottom = parseInt($(dlist[i].id).style.top.replace("px",""))+$(dlist[i].id).offsetHeight;

40 ftype=dlist[i].id.slice(0,dlist[i].id.indexOf("_"));

41 if(centerX>=tLeft&&centerY>=tTop&&centerX<=tRight&&centerY<=tBottom){

42 //将a对象元素删除

43 if(a.id!=dlist[i].id&&ftype!="file")

44 {

45 a.style.display="none";

46 }else{

47 a.style.left = originalX + 'px';

48 a.style.top = originalY + 'px';

49 }

50 }else{

51 a.style.left = originalX + 'px';

52 a.style.top = originalY + 'px';

53 }

54 }

55 a="";

56 };

57 document.onmousemove=function (d){

58 if(!a) return;

59 if(!d) d=event;

60 a.style.left=(d.clientX-b)+"px";

61 a.style.top=(d.clientY-c)+"px";

62 };

63 //触发事件

64 function handler(o,e){

65 a=o;

66 document.all?a.setCapture():window.captureEvents(Event.MOUSEMOVE);//兼容IE与ff,setCapture和captureEvents让a元素获取所有的鼠标事件

67 b=e.clientX-parseInt(a.style.left);

68 c=e.clientY-parseInt(a.style.top);

69 originalX=parseInt(a.style.left.replace("px",""));

70 originalY=parseInt(a.style.top.replace("px",""));

71 pid=o.parentNode.id;

72 o.style.zIndex=getMaxIndex()+1;

73 }

74 </script>

75 </head>

76 <body>

77 <div id="main">

78 <div style="left:100px;top:100px;background:#fc9; cursor:move;" id="folder_1" onmousedown="handler(this,event)">文件夹</div>

79 <div style="left:400px;top:100px;background:#9cf; cursor:move;" id="folder_2" onmousedown="handler(this,event)">文件夹</div>

80 <div style="left:700px;top:100px;background:#f9c; cursor:move;" id="folder_3" onmousedown="handler(this,event)">文件夹</div>

81 <div style="left:100px;top:300px;background:#9fc; cursor:move;" id="file_1" onmousedown="handler(this,event)">文件</div>

82 <div style="left:400px;top:300px;background:#c9f; cursor:move;" id="file_2" onmousedown="handler(this,event)">文件</div>

83 <div style="left:700px;top:300px;background:#cf9; cursor:move;" id="file_3" onmousedown="handler(this,event)">文件</div>

84 </div>

85 </body>

86 </html>

 

你可能感兴趣的:(windows)