jQueryQQdragjQuery实现的课拖拽层效果(仿QQ空间模块拖动)资源-CSDN下载

共9个文件

js：7个

html：1个

css：1个

jQuery

3星 · 超过75%的资源需积分: 10 18 浏览量 2013-04-10 10:01:11 上传评论收藏 61KB RAR 举报

《jQueryQQdrag：实现QQ空间模块拖动效果详解》在网页开发中，用户交互体验是至关重要的，其中，拖放（Drag and Drop）功能可以让用户以直观的方式操作页面元素，提升用户体验。jQueryQQdrag是一个基于jQuery库实现的插件，它模仿了QQ空间中的模块拖动效果，使开发者能够轻松地为网页添加类似的功能。本文将深入探讨jQueryQQdrag的原理、使用方法以及实际应用。我们需要理解jQuery的核心特性。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。通过使用jQuery，我们可以用更少的代码实现更多的功能，提高开发效率。 jQueryQQdrag插件的实现主要依赖于jQuery的事件处理机制，特别是`mousedown`、`mousemove`和`mouseup`这三个鼠标事件。当用户按下鼠标按钮（`mousedown`）时，插件记录下当前元素的位置；在鼠标移动（`mousemove`）时，根据鼠标的新位置计算出元素的偏移，并更新元素的位置；当用户释放鼠标按钮（`mouseup`）时，结束拖动操作。这种机制使得元素可以随着鼠标的移动而移动，实现了拖放的效果。为了实现QQ空间模块拖动的逼真感，jQueryQQdrag还考虑了元素的边界限制。在拖动过程中，元素不会超出其父容器的范围，这得益于JavaScript的边界检查和坐标调整。此外，插件可能还包含了防止元素重叠的逻辑，以保持页面布局的整洁。使用jQueryQQdrag非常简单。确保你的页面已经引入了jQuery库。然后，下载jQueryQQdrag插件并将其引入到页面中。接下来，只需选择你想要启用拖放功能的元素，调用`.qqdrag()`方法即可： ```html <script src="jquery.js"></script> <script src="jquery.qqdrag.js"></script> <div id="draggable-module" class="module">  </div> <script> $("#draggable-module").qqdrag(); </script> ``` 在这个例子中，id为`draggable-module`的模块元素将具有拖放功能。除了基本的拖放功能，jQueryQQdrag可能还提供了一些可配置的选项，允许开发者自定义拖放行为，例如设置拖放的敏感度、开启或关闭吸附效果等。这些选项可以通过`.qqdrag({option: value})`传递给插件。在实际应用中，jQueryQQdrag可以广泛用于各种场景，如布局管理器、拖放式文件上传、可调整大小的窗口等。结合其他jQuery插件，如Resizable，可以进一步增强用户体验，例如让被拖动的模块可以自由调整大小。 jQueryQQdrag是一个强大的工具，它利用jQuery的灵活性和易用性，为开发者提供了一种简单的方法来实现QQ空间模块式的拖放效果。通过理解和掌握这个插件，开发者可以在自己的项目中创建出更加动态和互动的网页元素，提升用户的参与度和满意度。

资源推荐

资源详情

资源评论

收起资源包目录

jQueryQQdragjQuery 实现的课拖拽层效果(模仿QQ空间的模块拖动功能).rar （9个子文件）

jb51.net

个人拖拽，模仿QQ空间

ui.sortable.js 38KB

ui.sortable.min.js 23KB

ui.core.min.js 8KB

ui.core.js 14KB

config.js 2KB

jquery-1.3.2.js 122KB

jquery-1.3.2.min.js 56KB

demo.html 6KB

style.css 1KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery UI Sortable - Portlets</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="ui/ui.core.min.js"></script> <script type="text/javascript" src="ui/ui.sortable.min.js"></script> <script type="text/javascript" src="config.js"></script> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <p> 布局： <a href="#" onClick="makeSort('1:3'); return false;">1:3</a> | <a href="#" onClick="makeSort('3:1'); return false;">3:1</a> | <a href="#" onClick="makeSort('1:1:2'); return false;">1:1:2</a> | <a href="#" onClick="makeSort('1:2:1'); return false;">1:2:1</a> | <a href="#" onClick="makeSort('2:1:1'); return false;">2:1:1</a> </p> <P> 风格：<input type="radio" name="themes" value="1" />黄色风格 <input type="radio" name="themes" value="2" />红色风格 <input type="radio" name="themes" value="3" checked="checked" />绿色风格 </P> <p>功能模块： <input type="checkbox" id="config_blog" value="1" checked="checked" />博客日志 <input type="checkbox" id="config_profile" value="1" checked="checked" />个人资料 <input type="checkbox" id="config_spaceinfo" value="1" checked="checked" />空间介绍 <input type="checkbox" id="config_gallery" value="1" checked="checked" />相册 <input type="checkbox" id="config_friends" value="1" checked="checked" />好友列表 <input type="checkbox" id="config_visitors" value="1" checked="checked" />最近访客 <input type="checkbox" id="config_thread" value="1" checked="checked" />话题列表 <input type="checkbox" id="config_comment" value="1" checked="checked" />留言评论 <input type="checkbox" id="config_doing" value="1" checked="checked" />最新动态 <input type="checkbox" id="config_avatar" value="1" checked="checked" />头像信息 <a href="#" onClick="addModule(); return false;">添加模块</a></p> <p> 自定义： </p> <p> <a href="#" onClick="saveConfig(); return false;">保存配置</a> </p> <br /> </div> <div id="contentlist"> <div id="avatar" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">头像信息<a href="#" class="closeEl">[-]</a></div> <ul> <li>Apples</li> <li>Apples</li> <li>Apples</li> <li>Apples</li> </ul> </div> </div> <div id="doing" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">最新动态<a href="#" class="closeEl">[-]</a></div> <ul> <li>Girls</li> <li>Girls</li> <li>Girls</li> <li>Girls</li> </ul> </div> </div> <div id="comment" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">留言簿<a href="#" class="closeEl">[-]</a></div> <ul> <li>Boys</li> <li>Boys</li> <li>Boys</li> <li>Boys</li> </ul> </div> </div> <div id="thread" class="groupItem"> <div class="itemContent" > <div style="-moz-user-select: none;" class="itemHeader">我的话题<a href="#" class="closeEl">[-]</a></div> <ul> <li>News</li> <li>News</li> <li>News</li> <li>News</li> </ul> </div> </div> <div id="visitors" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">最近访客<a href="#" class="closeEl">[-]</a></div> <ul> <li>Shopping</li> <li>Shopping</li> <li>Shopping</li> <li>Shopping</li> </ul> </div> </div> <div id="friends" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">我的好友<a href="#" class="closeEl">[-]</a></div> <ul> <li>Dogs</li> <li>Dogs</li> <li>Dogs</li> <li>Dogs</li> </ul> </div> </div> <div id="gallery" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">我的相册<a href="#" class="closeEl">[-]</a></div> <ul> <li>Cat</li> <li>Cat</li> <li>Cat</li> <li>Cat</li> </ul> </div> </div> <div id="spaceinfo" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">空间介绍<a href="#" class="closeEl">[-]</a></div> <ul> <li>Links</li> <li>Links</li> <li>Links</li> <li>Links</li> </ul> </div> </div> <div id="profile" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">个人资料<a href="#" class="closeEl">[-]</a></div> <ul> <li>Images</li> <li>Images</li> <li>Images</li> <li>Images</li> </ul> </div> </div> <div id="blog" class="groupItem"> <div class="itemContent"> <div style="-moz-user-select: none;" class="itemHeader">我的日志<a href="#" class="closeEl">[-]</a></div> <ul> <li>Humens</li> <li>Humens</li> <li>Humens</li> <li>Humens</li> </ul> </div> </div> </div> <div id="module_l" class="groupWrapper w250"> </div> <div id="module_m" class="groupWrapper w500"> </div> <div id="module_r" class="groupWrapper w250"> </div> </body> </html>

评论收藏

内容反馈