js仿igoogle拖拽效果3资源-CSDN下载资源-CSDN下载

共2个文件

js：1个

htm：1个

需积分: 9 150 浏览量 2010-04-09 10:37:47 上传评论收藏 10KB RAR 举报

JavaScript仿iGoogle拖拽效果是一种常见的前端交互设计，它允许用户通过鼠标拖动网页上的元素来重新排列布局，提供了一种高度自定义和个性化的用户体验。这个效果在iGoogle，Google的个性化主页服务中被广泛使用，允许用户自由调整各个小部件的位置。在这里，我们将深入探讨如何使用JavaScript实现这一功能，并基于提供的文件`ig.htm`和`scripts`来构建这样的拖拽效果。我们需要理解拖拽过程的基本步骤： 1. **选择元素**：当用户点击一个元素时，我们需要监听`mousedown`事件，标记当前被选中的元素并存储鼠标按下时的位置。 2. **拖动过程**：在`mousemove`事件中，我们需要计算鼠标的当前位置与最初点击时的位置差，然后更新元素的位置，使得元素跟随鼠标移动。 3. **释放元素**：当用户释放鼠标（`mouseup`事件）时，结束拖动状态，可能需要对元素的新位置进行一些额外的处理，如验证是否超出容器范围或触发其他相关事件。在`ig.htm`中，通常会包含HTML结构，定义了可以被拖动的小部件元素。这些元素可能带有特定的类名或ID以便于JavaScript识别。例如： ```html <div id="widget1" class="draggable"> <h2>小部件1</h2> <p>这是可拖动的小部件内容。</p> </div> <div id="widget2" class="draggable"> <h2>小部件2</h2> <p>另一个可拖动的小部件。</p> </div> ``` 接下来，在`scripts`中的JavaScript代码需要实现拖拽逻辑。这里我们可以使用原生JavaScript或依赖像jQuery这样的库来简化操作。以下是一个简单的原生JavaScript实现示例： ```javascript var dragElement = null; var initialX, initialY; document.addEventListener('mousedown', function(event) { if (event.target.classList.contains('draggable')) { dragElement = event.target; initialX = event.clientX - dragElement.offsetLeft; initialY = event.clientY - dragElement.offsetTop; document.addEventListener('mousemove', onDrag); document.addEventListener('mouseup', onRelease); } }); function onDrag(event) { if (dragElement) { dragElement.style.left = (event.clientX - initialX) + 'px'; dragElement.style.top = (event.clientY - initialY) + 'px'; } } function onRelease() { dragElement = null; document.removeEventListener('mousemove', onDrag); document.removeEventListener('mouseup', onRelease); } ``` 这段代码通过监听`mousedown`, `mousemove`和`mouseup`事件，实现了基本的拖拽效果。`onDrag`函数更新了元素的位置，而`onRelease`函数在鼠标释放后清理状态。为了提升用户体验，还可以添加一些额外的功能，例如： - **限制拖动范围**：确保元素不会超出其父容器或其他设定的边界。 - **阻止默认行为**：使用`event.preventDefault()`阻止文本选择等默认行为。 - **视觉反馈**：在拖动过程中改变元素的透明度或添加边框，以提示用户正在操作。 - **事件触发**：在元素位置改变后，触发自定义事件，以便在其他地方响应这些变化。实现JavaScript仿iGoogle拖拽效果涉及到对鼠标事件的监听和元素位置的动态更新。通过以上步骤和示例代码，你可以创建一个允许用户自定义页面布局的交互式界面。结合`ig.htm`的HTML结构和`scripts`中的JavaScript代码，你将能够复现这个效果，为用户提供一种富有个性化的浏览体验。

资源推荐

资源详情

资源评论

收起资源包目录

20096722712321.rar （2个子文件）

ig.htm 32KB

scripts

google_drag.js 11KB

<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Google</title> <style>  </style> <script src="scripts/google_drag.js"></script> </head> <body bgcolor=#ffffff text=#000000 topmargin=3 marginheight=3> <table cellpadding=0 cellspacing=0 border=0 width=100% height=100%> <tr> <td valign=top height=100%> <div id=cpnl style="height:100%;width:1px;overflow:hidden;"> <style>  </style> <div id=cpnlc style="padding:1px;height:100%;width:13em;border-right:1px solid #3366cc;"> <div class=panelo> <div class=cpromo onClick="return _tp(false)">关闭</div> </div> <br> <div id=ps{198} class=mlist_open><a class=mlisthead href=# onClick="return _ts('ps','{198}');blur();"><font color=#3366cc><b>我的资料</b></font></a> <div class=psc> <div class=mitem id="n_30="><span class=mname>书签</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_30=');"> </div> <div class=mitem id="n_20="><span class=mname>Gmail</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_20=');"> </div> <div class=mitem id="n_31="><span class=mname>搜索历史记录</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_31=');"> </div> </div> <div class=c></div> </div> <div id=ps{199} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{199}');blur();"><font color=#aa0033><b>新闻</b></font></a> <div class=psc> <div id=ps{205} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{205}');blur();"><font color=#aa0033><b>Google 新闻</b></font></a> <div class=psc> <div class=mitem id="n_24=sec%3D0" style="display:none"><span class=mname>Top Stories</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D0');"> </div> <div class=mitem id="n_24=sec%3D3"><span class=mname>World</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D3');"> </div> <div class=mitem id="n_24=sec%3D5"><span class=mname>Business</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D5');"> </div> <div class=mitem id="n_24=sec%3D6"><span class=mname>Sci/Tech</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D6');"> </div> <div class=mitem id="n_24=sec%3D1"><span class=mname>Sports</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D1');"> </div> <div class=mitem id="n_24=sec%3D2"><span class=mname>Entertainment</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D2');"> </div> <div class=mitem id="n_24=sec%3D8"><span class=mname>Society</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D8');"> </div> <div class=mitem id="n_24=sec%3D255"><span class=mname>自选新闻</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_24=sec%3D255');"> </div> </div> <div class=c></div> </div> <div class=mitem id="url=http://news.163.com/special/r/00011K6L/rss_newstop.xml"><span class=mname>网易新闻</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://news.163.com/special/r/00011K6L/rss_newstop.xml%26val%3D3');"> </div> <div class=mitem id="url=http://rss.xinhuanet.com/rss/world.xml"><span class=mname>新华网</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.xinhuanet.com/rss/world.xml%26val%3D3');"> </div> <div class=mitem id="url=http://rss.sina.com.cn/news/marquee/ddt.xml"><span class=mname>新浪新闻</span> <input class=addbtn type=button value="添加 »" onClick="_add_m('n_25=url%3Dhttp://rss.sina.com.cn/news/marquee/ddt.xml%26val%3D3');"> </div> </div> <div class=c></div> </div> <div id=ps{200} class=mlist_closed><a class=mlisthead href=# onClick="return _ts('ps','{200}');blur();"><font color=#008000><b>财经</b></font></a> <div class=psc> <div class=mitem id="url=http://biz.163.com/special/b/00021HSF/bizbignews.xml" style=

评论收藏

内容反馈