从igoogle上down下来的拖曳代码实现拖曳布局保存到数据库资源-CSDN下载

共8个文件

asp：3个

js：2个

mdb：1个

5星 · 超过95%的资源需积分: 12 158 浏览量 2008-06-20 11:12:27 上传评论 1 收藏 36KB RAR 举报

【标题解析】 "从igoogle上down下来的拖曳代码实现拖曳布局保存到数据库"这个标题揭示了我们讨论的核心技术：拖曳操作（Drag and Drop）以及如何将这种交互体验与数据库相结合。igoogle是Google的一个个性化主页服务，允许用户自定义布局，这个拖曳代码可能是用于实现类似功能的JavaScript或HTML5代码，用户可以自由调整页面元素的位置，并能保存这些布局到数据库中。【描述解读】描述中提到，这个技术是基于客户端的，意味着它主要在用户的浏览器端执行，不依赖特定的操作系统或服务器端的技术。用户可以使用任何他们喜欢且熟悉的编程语言来处理块中的内容，比如JavaScript、PHP、Python等。同时，拖动的列数和块可以动态生成，这表明代码可能支持动态布局，可以根据需求加载不同的数据。这些数据可能来自数据库，用户可以通过操作界面进行增删改查，所有的改变都能实时反映到数据库中。【知识点详解】 1. **拖曳操作(Drag and Drop)**：这是一种用户界面技术，允许用户通过鼠标或其他输入设备选择一个元素并将其移动到另一个位置。在Web开发中，HTML5提供了原生的拖放API，使得开发者可以方便地实现拖曳功能。 2. **客户端编程**：这里的客户端指的是用户的浏览器，使用JavaScript、HTML、CSS等技术构建用户界面，实现与用户的交互。这些代码通常运行在用户的设备上，减少了对服务器的请求，提高了响应速度。 3. **平台无关性**：这意味着拖曳功能的实现不受操作系统限制，无论是Windows、Mac还是Linux，只要浏览器支持相关技术，就能正常工作。 4. **动态布局**：布局可以随着用户的需求或数据的变化而变化，这通常涉及到响应式设计，使界面适应不同屏幕尺寸和设备。 5. **数据库交互**：保存拖曳后的布局信息需要与数据库进行通信。这通常涉及AJAX（异步JavaScript和XML）技术，允许在不刷新整个页面的情况下更新部分网页内容。 6. **后端语言**：虽然描述中提到可以用任何熟悉的语言处理块中的内容，但通常后端语言（如PHP、Python、Java等）用于处理数据库操作，接收前端发送的请求，更新或查询数据库，然后返回结果。 7. **JSON**：作为数据交换格式，JSON常用于前后端的数据传输，因为它轻量级、易于阅读和编写，同时也被大多数现代编程语言广泛支持。 8. **状态管理**：在拖曳过程中，可能需要维护多个状态，如当前拖动的元素、目标位置等。状态管理库如Redux或Vuex可以帮助处理这些复杂的状态变化。 9. **事件监听**：在实现拖曳功能时，需要监听并处理各种事件，如dragstart、drag、dragend等，以控制拖动过程中的行为。这个压缩包可能包含了一个实现拖曳布局并能将布局信息存储到数据库的前端项目。学习和理解这些技术可以帮助开发者创建更富交互性的网页应用，提供更好的用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

ig.rar （8个子文件）

#eonnig.mdb 156KB

datadeal.asp 842B

default.htm 1KB

conn.asp 1KB

ig.css 13KB

ig.js 71KB

zxml.js 6KB

contents.asp 1KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>iGoogle</title> <link rel="stylesheet" type="text/css" href="ig.css"/> <script type="text/javascript" src="ig.js"></script> <script> _pl=false; _old_html = false; _cbp=true; _upc(); </script> <script type="text/javascript" src="zxml.js"></script> </head> <body> <div id="modules"> <div class="yui-gb" id="t_1"> </div> </div> <script> function contentsshow() { var oXmlHttp = zXmlHttp.createRequest(); oXmlHttp.open("get", "contents.asp", true); oXmlHttp.onreadystatechange = function () { if (oXmlHttp.readyState == 4) { if (oXmlHttp.status == 200) { _gel("t_1").innerHTML=oXmlHttp.responseText; _table=_gel("t_1"); _pl=true; _upc(); } else { errordisplay("An error occurred: " + oXmlHttp.statusText); } } }; oXmlHttp.send(null); } function errordisplay(sText) { _gel("t_1").innerHTML = sText; } contentsshow(); </script> <noscript> 您需要启动JavaScript 才能使用本网页 </noscript> </body> </html>

评论收藏

内容反馈