- 浏览: 327460 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
chenfang_0913:
您好,我按照您的方法在Windows端进行了实现,可是我一直捕 ...
java实现网卡数据包抓取学习 -
wps886:
google了半天全是错的,只有楼主的xml配置有用,太感谢了 ...
奇怪的400 BAD REQUEST -
laputa73:
node.addEventListener('mouseup' ...
网络拓扑图DEMO -
njyyao:
单击、双击、右击的事件处理事件?
网络拓扑图DEMO -
lilinshtandby:
不错不错,赞一个
dhtmlxTree总结
<html> <head> <title>能够自由拖动布局区域的网页</title> <style type="text/css"> <!-- body{ font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; /*background-color:#ffffd5;*/ background-color:#e6ffda; } .dragTable{ font-size:12px; /*border:1px solid #003a82;*/ border:1px solid #206100; margin-bottom:5px; width:100%; /*background-color:#cfe5ff;*/ background-color:#c9ffaf; } td{ padding:3px 2px 3px 2px; vertical-align:top; } .dragTR{ cursor:move; /*color:#FFFFFF; background-color:#0073ff;*/ color:#ffff00; background-color:#3cb500; height:20px; font-weight:bold; font-size:14px; font-family:Arial, Helvetica, sans-serif; } #parentTable{ border-collapse:collapse; } --> </style> <script language="javascript" defer="defer"> var Drag={ dragged:false, ao:null, tdiv:null, dragStart:function(){ Drag.ao=event.srcElement; if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){ Drag.ao=Drag.ao.offsetParent; Drag.ao.style.zIndex=100; }else return; Drag.dragged=true; Drag.tdiv=document.createElement("div"); Drag.tdiv.innerHTML=Drag.ao.outerHTML; Drag.ao.style.border="1px dashed red"; Drag.tdiv.style.display="block"; Drag.tdiv.style.position="absolute"; Drag.tdiv.style.filter="alpha(opacity=70)"; Drag.tdiv.style.cursor="move"; Drag.tdiv.style.border="1px solid #000000"; Drag.tdiv.style.width=Drag.ao.offsetWidth; Drag.tdiv.style.height=Drag.ao.offsetHeight; Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top; Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left; document.body.appendChild(Drag.tdiv); Drag.lastX=event.clientX; Drag.lastY=event.clientY; Drag.lastLeft=Drag.tdiv.style.left; Drag.lastTop=Drag.tdiv.style.top; }, draging:function(){//判断MOUSE的位置 if(!Drag.dragged||Drag.ao==null)return; var tX=event.clientX; var tY=event.clientY; Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX; Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY; for(var i=0;i<parentTable.cells.length;i++){ var parentCell=Drag.getInfo(parentTable.cells[i]); if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ var subTables=parentTable.cells[i].getElementsByTagName("table"); if(subTables.length==0){ if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ parentTable.cells[i].appendChild(Drag.ao); } break; } for(var j=0;j<subTables.length;j++){ var subTable=Drag.getInfo(subTables[j]); if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){ parentTable.cells[i].insertBefore(Drag.ao,subTables[j]); break; }else{ parentTable.cells[i].appendChild(Drag.ao); } } } } }, dragEnd:function(){ if(!Drag.dragged) return; Drag.dragged=false; Drag.mm=Drag.repos(150,15); Drag.ao.style.borderWidth="0px"; //Drag.ao.style.border="1px solid #003a82"; Drag.ao.style.border="1px solid #206100"; Drag.tdiv.style.borderWidth="0px"; Drag.ao.style.zIndex=1; }, getInfo:function(o){//取得坐标 var to=new Object(); to.left=to.right=to.top=to.bottom=0; var twidth=o.offsetWidth; var theight=o.offsetHeight; while(o!=document.body){ to.left+=o.offsetLeft; to.top+=o.offsetTop; o=o.offsetParent; } to.right=to.left+twidth; to.bottom=to.top+theight; return to; }, repos:function(aa,ab){ var f=Drag.tdiv.filters.alpha.opacity; var tl=parseInt(Drag.getInfo(Drag.tdiv).left); var tt=parseInt(Drag.getInfo(Drag.tdiv).top); var kl=(tl-Drag.getInfo(Drag.ao).left)/ab; var kt=(tt-Drag.getInfo(Drag.ao).top)/ab; var kf=f/ab; return setInterval(function(){ if(ab<1){ clearInterval(Drag.mm); Drag.tdiv.removeNode(true); Drag.ao=null; return; } ab--; tl-=kl; tt-=kt; f-=kf; Drag.tdiv.style.left=parseInt(tl)+"px"; Drag.tdiv.style.top=parseInt(tt)+"px"; Drag.tdiv.filters.alpha.opacity=f; } ,aa/ab) }, inint:function(){ for(var i=0;i<parentTable.cells.length;i++){ var subTables=parentTable.cells[i].getElementsByTagName("table"); for(var j=0;j<subTables.length;j++){ if(subTables[j].className!="dragTable") break; subTables[j].rows[0].className="dragTR"; subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart); } } document.onmousemove=Drag.draging; document.onmouseup=Drag.dragEnd; } } Drag.inint(); </script> </head> <body> <table cellspacing="4" width="100%" id="parentTable"> <tr> <td width="25%" valgin="top"> <table class="dragTable" cellspacing="0"> <tr><td>CSS</td></tr> <tr><td>CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过,并且推荐使用的。</td><tr> </table> <table class="dragTable" cellspacing="0"> <tr><td>AJAX</td></tr> <tr><td>Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是目前很新的一项网络应用技术。</td><tr> </table> </td> <td width="25%"> <table class="dragTable" cellspacing="0"> <tr><td>Javascript</td></tr> <tr><td>Javascript是一种基于对象的脚本语言,使用它可以开发Internet客户端的应用程序。Javascript在HTML页面中以语句的方式出现,并且执行相应的操作。</td><tr> </table> </td> <td width="25%"> <table class="dragTable" cellspacing="0"> <tr><td>XML</td></tr> <tr><td>XML是eXtensible Markup Language的缩写,即可扩展标记语言。它是一种可以用来创建自定义标记的语言,由万维网协会(W3C)创建,用来克服HTML的局限。</td><tr> </table> <table class="dragTable" cellspacing="0"> <tr><td>网页变幻</td></tr> <tr><td>保持页面的HTML不变,通过分别调用三个外部CSS文件,实现三个完全不同的页面效果,蓝色经典、清明上河图、交河古城。</td><tr> </table> </td> </tr> </table> </body> </html>
以上代码摘自《精通CSS+DIV》一书第15章
发表评论
-
禁止页面放大缩小
2013-05-12 18:42 1904<html> <head> &l ... -
在web.xml中添加多个filter
2011-05-10 15:32 6665web.xml中的多个filter的运行顺序walker(wa ... -
tomcat无法启动
2011-05-08 09:11 1119Myeclipse8.5 + Tomcat7.0.5 发布应 ... -
XML to JSON
2011-04-06 16:17 1300现在JSON在前台的应用越来越广泛,不过也有很多系统是基于XM ... -
ajax tree框架(zTree)
2011-04-05 12:23 2892在以往的项目中,有时会用到树菜单的操作.我用过dhtmltre ... -
通过HttpClient发送Web Service请求
2011-01-19 10:29 1845import java.io.ByteArrayInputSt ... -
使用JES搭建小巧的Mail服务器
2010-10-26 21:56 1601最新需要使用MAIL服务器进行测试,正所谓山不在高,有仙则灵. ... -
struts2+spring2+hibernate3所需要的最少jar包
2010-04-19 16:06 1600Spring2所需要的jar包最简单,只需要一个综合的spri ... -
Struts2中获取requset,session,application
2010-01-04 13:24 1610struts2中Action是集成于com.opensymph ... -
struts2.0中struts.xml配置文件详解(转)
2010-01-04 11:10 1112<!DOCTYPE struts PUBLIC &quo ... -
struts2-Unable to load configuration. - bean - jar
2010-01-01 12:01 2856在整合Struts2 + Spring2 + Hibernat ... -
[转载]企业级SOA之路——在Web Service中使用HTTP和JMS
2009-12-28 10:28 1239本文来自CSDN博客,转载请标明出处:http://blog. ... -
XAMPP虚拟主机配置,实现单主机多个站点
2009-10-24 23:31 2786打开注释 NameVirtualHost *:80 ... -
thinkphp中使用ajax接收json数据
2009-04-01 17:25 9498参考thinkphp+jquery实现ajax,扩展了下,写了 ... -
基于服务器推的web im(未实现)
2009-03-24 16:10 1388想着手研究一下服务器推技术,看看能不能写出一个web im程序 ... -
使用dhtmltree动态生成树菜单总结
2009-03-19 13:49 5738我之前发布的dhtmltree总 ... -
jquery+json小例子
2009-02-19 16:08 10021由有不当之处,还望大家能指出。 直接进入主题,使用jquery ... -
在OpenFire的基础上安装JWChat 1.0
2009-02-12 17:57 0http://blog.csdn.net/simonhe197 ... -
JSON介绍
2008-12-11 12:18 2031JSON已经被广泛誉为浏览器中XML的替代品,它的目标仅仅是成 ... -
关于SSO跨应用访问操作解决思路
2008-11-25 22:03 1541最近接手了一些使用CAS,单点登陆的几个项目,项目进行挺顺利, ...
相关推荐
Ajax 自由拖动网页布局是一种技术,用于创建用户可以自由调整元素位置的互动式网页。这一技术结合了Asynchronous JavaScript and XML(Ajax)的核心特点,实现了无刷新更新页面,为用户提供流畅、直观的交互体验。在...
### 自定义拖动布局首页知识点解析 #### 一、标题与描述解读 - **标题**:“自定义拖动布局首页,像QQ空间那样,拖动布局”:这表明该页面的目标是实现一种类似QQ空间的自定义拖动布局功能。用户能够通过鼠标拖动来...
通过这样的方式,我们可以创建一个动态且交互性强的网页布局,用户可以自由调整`div`块的位置,提升网页的可用性和趣味性。对于开发者来说,熟练掌握这种技术不仅可以丰富网页设计手段,还能提高用户满意度,是现代...
【拖动的个性化网页布局】是一种现代网页设计技术,...通过掌握以上这些技术点,开发者可以创建出一个功能完善的、具有拖动个性化布局的网页应用,使用户能够根据个人喜好自由调整页面元素,提升其在网站上的互动体验。
实现这样的自由拖动功能后,用户就可以在运行时自由地调整控件布局,极大地提高了应用的交互性和用户体验。这种模拟设计器的概念使得非程序员也能轻松定制界面,类似于可视化编程的理念。 总的来说,"winform自由...
jQuery UI库提供了一套丰富的组件和工具,使得开发者能够轻松创建具有高级交互特性的网页应用。本篇文章将深入探讨如何利用jQuery UI实现定位层带删除按钮的拖动布局排序功能。 首先,jQuery UI中的`draggable`和`...
在给定的标题“jquery拖拽排序插件div自由拖动排序代码”中,我们主要讨论的是如何利用jQuery实现一个功能,让用户能够自由地通过拖放操作来对页面上的div元素进行排序。这种功能在许多应用场景中都非常实用,比如...
这样可以提高代码的灵活性,减少样式依赖,让布局和样式设计更加自由。 在实现过程中,可能还需要考虑以下几点: 1. **边界检测**:确保菜单项只能在指定区域内拖放,防止超出边界。 2. **事件阻止**:阻止默认的...
在IT行业中,创建一个可以自由拖动的div页面布局,类似于Google的iGoogle个性化首页,是一种常见的用户界面设计技巧。这种设计允许用户根据个人喜好调整和定制内容的显示方式,提高用户体验。以下将详细讲解实现这个...
6. **自定义布局**:用户自定义拖动层布局意味着用户可以根据需求自由排列元素。这通常需要维护一个数据结构(如数组或对象),记录每个元素的位置信息,并在拖放操作完成后更新这个结构,以便在后续页面刷新或重载...
本文将深入探讨如何在QT中创建自定义窗口,并实现自由拖动和自定义标题的功能。 首先,我们需要了解QT中的QMainWindow类,它是大多数QT应用程序的基础,提供了菜单、工具栏和状态栏等标准窗口元素。然而,为了...
在这个项目中,我们将探讨如何使用jQuery来创建一个可拖动的网格布局系统,用户可以自由调整元素的位置,从而实现个性化界面的布局。 首先,我们需要理解网格布局的基本概念。网格布局是一种将页面划分为多个单元格...
这在创建交互式网页应用,如对话框、工具提示或自定义布局时非常有用。浮动层通常是指在页面上可以自由移动的元素,例如弹出窗口或悬浮菜单。 要实现"jQuery+ui自由拖动浮动层",首先需要在HTML文件中引入jQuery和...
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 17.2 ...
jQuery Splitter插件就是这样一个强大的工具,它允许用户通过拖动分割线来实现布局的灵活调整,与Visual Studio 2010中的拖拉区域条功能类似,极大地提高了用户体验。 jQuery Splitter是基于JavaScript库jQuery的一...
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.2 模块拆分 16.3 整体调整 第17章 小型工作室网站 17.1 分析构架 ...
在这个新的类中,重写WndProc方法,处理WM_NCHITTEST消息,来实现自定义的拖动区域。同时,你需要处理WM_SIZE消息来处理控件的大小改变。 **实现控件大小改变的策略** 1. **OnResize事件**:Delphi中的控件有...
它允许开发者在Web应用中实现灵活多样的窗口布局,包括分割面板、堆叠区域、可拖动和可调整大小的组件等。这款库在前端开发领域中广泛应用于数据可视化、编辑器工具、仪表板和其他需要高度定制用户界面的场景。 ...
通过学习和使用这个插件,开发者可以提升其项目中的交互性和用户友好性,使得用户能够更自由地自定义页面布局或管理内容。同时,这也是理解JavaScript事件处理、DOM操作和第三方库集成的好实践。
- **阻力反馈**:在接近边界或已满区域时,拖动元素会感受到阻力,增加交互的真实感。 - **拖放指示器**:在拖动过程中显示指示器,预览元素被放置的位置。 五、使用教程 使用JKDrag通常需要集成框架,配置数据源和...