收藏 分销(赏)

页面元素可拖拽放置的实现原理.doc

上传人:精*** 文档编号:9763414 上传时间:2025-04-06 格式:DOC 页数:3 大小:22KB 下载积分:5 金币
下载 相关 举报
页面元素可拖拽放置的实现原理.doc_第1页
第1页 / 共3页
页面元素可拖拽放置的实现原理.doc_第2页
第2页 / 共3页


点击查看更多>>
资源描述
  基本上msn、microsoft Live 和GOOGLE个性主页 元素可拖动并放置的的实现原理就是对DOM的操作再加上JAVASCRIPT拖动元素。实现起来实际上并不难,但是要做到很美观并符合用户习惯就需要一些时间思考了。   以下代码实现了上述功能,虽然很简单,但是基本上说明了原理。实现更高级的功能当然还需要改进。   <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >   <html>   <head>    <title>DropLayer2</title>    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">    <meta name="CODE_LANGUAGE" Content="C#">    <meta name="vs_defaultClientScript" content="JavaScript">    <meta name="vs_targetSchema" content="">    <style type="text/css">    div   {    border-right: lightgrey thin solid;    border-top: lightgrey thin solid;    font-weight: bold;    z-index: 2;    text-transform: capitalize;    border-left: lightgrey thin solid;    color: white;    border-bottom: lightgrey thin solid;    background-color: dimgray;   }    </style>   </head>   <body>    <div id="parentDiv" class="parentCss" style="width:100">    <div class="itemCss" onmouseover="InsertDiv(this)">one 1</div>    <div class="itemCss" onmouseover="InsertDiv(this)">two 2</div>    <div class="itemCss" onmouseover="InsertDiv(this)">three 3</div>    <div class="itemCss" onmouseover="InsertDiv(this)">four 4</div>    <div class="itemCss" onmouseover="InsertDiv(this)">five 5</div>    <div class="itemCss" onmouseover="InsertDiv(this)">six 6</div>    <div class="itemCss" onmouseover="InsertDiv(this)">seven 7</div>    <div class="itemCss" onmouseover="InsertDiv(this)">eight 8</div>    <div class="itemCss" onmouseover="InsertDiv(this)">nine 9</div>    <div class="itemCss" onmouseover="InsertDiv(this)">ten 10</div>    </div>    <script language="javascript">   <!--   var obj,obj2; //引发事件对象   var rootNode; //控制对象根节点   var IsDrag=false; //是否抓起   var NullDiv; //空临时层   var x,y; //鼠标与控件的相对坐标   window.onload = Prepare; //窗体加载时委托到Prepare      function Prepare()   {    //生成临时层,并设置其属性    NullDiv = document.createElement("div");       //获得控制对象的根节点元素    rootNode = document.getElementById("parentDiv");       document.onmousemove=MoveIt; //当鼠标在文档上移动时事件委托到MoveIt       document.onmousedown=Drag; //当鼠标按下时事件委托到Drag       document.onmouseup=Release; //当鼠标释放台起时事件委托到Release         }      function Drag()   {    obj = event.srcElement;       x=0;//event.offsetX;    y=0;//event.offsetY;       obj.style.position='absolute';       obj.style.posTop=event.y-y;    obj.style.posLeft=event.x-x;       IsDrag=true;   }   function MoveIt()   {    //window.status = event.x+"|"+event.y+"|"+IsDrag+"|"+x+"|"+y;       if(IsDrag)    {    obj.style.posTop=event.y-y;    obj.style.posLeft=event.x-x;    }   }   function Release()   {    IsDrag=false;       NullDiv.style.display='none';       obj.style.position='';       rootNode.insertBefore(obj,obj2);   }   function InsertDiv(o)   {    if(IsDrag)    {    obj2=o;    NullDiv.style.display='';    NullDiv.style.height='18';    NullDiv.style.width='100';    rootNode.insertBefore(NullDiv,obj2);    }   }   //-->    </script>   </body>   </html>   更多信息请查看IT技术专栏   
展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传

当前位置:首页 > 包罗万象 > 大杂烩

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2025 宁波自信网络信息技术有限公司  版权所有

客服电话:4009-655-100  投诉/维权电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :微信公众号    抖音    微博    LOFTER 

客服