基于jquery实现的portal拖拽实现布局调整

共6个文件

js：2个

aspx：1个

cs：1个

jquery

portal

5星 · 超过95%的资源需积分: 50 43 浏览量 2014-09-23 16:01:51 上传评论收藏 12KB ZIP 举报

在IT行业中，Portal系统是一种常见的企业级应用，它允许用户在一个统一的界面上访问各种不同的信息和服务。在本示例中，我们关注的是一个基于jQuery实现的Portal布局调整功能，而不是依赖于EasyUI Portal或Sortable插件。这个功能通过拖拽操作使用户能够自定义门户页面上的组件位置，从而实现个性化的布局。我们要理解jQuery，这是一个广泛使用的JavaScript库，简化了HTML DOM元素的操作，事件处理，动画，以及Ajax交互。在基于jQuery的Portal中，这个强大的库被用来处理拖拽事件，使得用户可以轻松地移动页面上的元素。 `jquery.dragsort-0.5.2.js` 和 `jquery.dragsort-0.5.2.min.js` 是用于实现拖放排序功能的jQuery插件。DragSort是一个轻量级的插件，它允许用户在指定的DOM元素上进行拖放操作，并自动更新数据源以反映界面的变化。这个插件通常包含两个主要部分：拖动元素和接收元素的容器。当用户开始拖动一个元素时，插件会监听鼠标事件并开始处理拖放行为，直到元素被释放到新的位置。在`example.aspx`、`example.aspx.cs`、`example.html`和`example.php`这些文件中，我们可以看到实际的代码实现。`example.aspx`和`.cs`文件可能是ASP.NET Web Forms的应用，而`example.html`和`example.php`则可能分别代表HTML和PHP的前端和后端实现。在这些文件中，jQuery库和DragSort插件会被引入，然后通过JavaScript代码与后端交互，实现拖拽布局的功能。例如，`.cs`文件可能包含了处理拖放事件后服务器端的数据更新逻辑，而`example.html`或`example.php`则负责呈现页面结构和初始化拖拽功能。在实现拖拽布局时，通常会涉及以下步骤： 1. **页面结构**：页面上的每个可拖动元素都应有一个唯一的ID，以便在JavaScript中进行引用。元素可能被包裹在一个可排序的容器中。 2. **初始化DragSort**：在页面加载完成后，使用jQuery选择器找到可拖动的元素，并调用DragSort插件进行初始化。 3. **事件处理**：DragSort插件会自动处理拖放事件，包括开始拖动、拖动过程和释放等。开发者可以通过插件提供的回调函数定制这些行为。 4. **数据同步**：当元素的位置改变时，需要更新服务器端的数据以保存新布局。这可能通过Ajax请求完成，将新的元素顺序发送给后端。 5. **用户体验优化**：添加视觉反馈，如拖动时的阴影效果、元素移动时的指示等，以提升用户体验。通过这样的实现，用户可以根据自己的需求自由调整Portal页面的布局，使得信息更加符合个人习惯，提高了使用效率。在实际项目中，这种拖拽布局功能也可以扩展应用于其他场景，如自定义仪表板、个性化设置等。

资源推荐

资源详情

资源评论

收起资源包目录

dragsort.zip （6个子文件）

example.aspx 2KB

example.html 4KB

jquery.dragsort-0.5.2.min.js 9KB

example.aspx.cs 749B

example.php 2KB

jquery.dragsort-0.5.2.js 16KB

<?php if ($_POST) { $ids = $_POST["ids"]; for ($idx = 0; $idx < count($ids); $idx+=1) { $id = $ids[$idx]; $ordinal = $idx; //... } return; } ?> <!DOCTYPE html> <html> <head> <title>DragSort Example</title> <meta charset="utf-8" /> <style type="text/css"> body { font-family:Arial; font-size:12pt; padding:20px; width: 800px; margin:20px auto; border:solid 1px black; } h1 { font-size:16pt; } h2 { font-size:13pt; } ul { width:350px; list-style-type: none; margin:0px; padding:0px; } li { float:left; padding:5px; width:100px; height:100px; } li div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; } .placeHolder div { background-color:white!important; border:dashed 1px gray !important; } </style> </head> <body> <div> <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> <h1>jQuery List DragSort PHP Example</h1> <a href="http://dragsort.codeplex.com/">Homepage</a><br/> <br/> <h2>Save list order with ajax:</h2> <ul id="gallery"> <?php $list = array("blue", "orange", "brown", "red", "yellow", "green", "black", "white", "purple"); for ($idx = 0; $idx < count($list); $idx+=1) { echo "<li data-itemid='" . $idx . "'>"; echo "<div>" . $list[$idx] . "</div>"; echo "</li>"; } ?> </ul> <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script> <script type="text/javascript"> $("#gallery").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" }); function saveOrder() { var data = $("#gallery li").map(function() { return $(this).data("itemid"); }).get(); $.post("example.php", { "ids[]": data }); }; </script> <div style="clear:both;"></div> </div> </body> </html>

评论收藏

内容反馈