个人管理功能

在CSDN Blog撰写技术文章，即有机会入选CSDN技术中心，现在就去免费注册！已注册用户，点击登录。

热门标签

专题历史

有人说SOA是一种IT策略，有人说SOA是一种架构理念，还有人说SOA是一种服务。SOA到底是什么？它将带来什么？软件产业的变革亦或是新的机遇下的挑战？业界权威专家带领我们一起去深究，去探索。BEA三位重量级专家与您共同探讨SOA

随着WPF/E更名为正式名称Silverlight，以及Silverlight 1.1 Alpha 版本的发布，答案变得清晰，而且令人兴奋！ - 一个跨操作系统，跨浏览器的Web应用平台出现了。Silverlight 这样一个4.5MB的浏览器插件(1.1 Alpha文件)是如何做到的这些的？周岳: SilverLight-Web应用的一道强光

中国移动用户数量在大踏步地发展与增长,根据产业部的数据,仅三月就新增了670万户。预估计6月份之后,中国很快将迎来第五亿手机用户(平均不到3人拥有一台手机)而J2ME做为最重要的手机跨平台技术，凭借Java平台以其良好的开放性和支持能力，得到了众多手机厂商的支持。对众多开发者来说，J2ME程序易于移植，轻松实现“一次编写，到处运行”。J2ME系列开发专题，将带你从最基本的工具安装，环境配置开始，进入移动应用开发的世界。 CSDN移动开发系列之-“J2ME开发实训”

7月31日-8月1日，即将在上海召开甲骨文全球大会•亚太地区会议同期举行的甲骨文开发者大会，这是一项付费参加的面向开发人员的活动。在甲骨文开发者大会期间，您将听到世界一流的专家讲述如何使用Java、.NET、XML和PL/SQL以及Ajax、PHP、Spring、Groovy on Rails等流行技术来简化开发过程。在为期两天的甲骨文开发者大会中，您将能够提高自身的开发技能，扩充知识，参加几十场由专家主持的深入细致的技术讲座并在专家的辅导下进行上机操作、了解高级技能和获得详细指导。在甲骨文开发者大会期间，您有机会直接向业界一流的技术专家和开发人员请教。欢迎参加甲骨文全球大会·2007·亚太地区开发者大会

2007年6月29日，自由软件基金会宣布，其创始人Richard Stallman将在GNU的网站上，在本周太平洋时间星期五上午9点通过视频发布GPLv3。本来，GPL并不是所有开源组织所认可的协议。其从出现以来一直存在争议，GPL被认为是一种“病毒式”的协议，BSD的fans和老牌Unix黑客们认为，他们编写Unix的年头都比GPL声明要长得多，他们更愿意采用比GPL更加的自由的BSD协议。今天，开源社区中有70%左右的项目采用了GPL。很多在开源社区的老牌黑客们认为，Richard Stallman所鼓吹开源软件的言行与当年卡尔·马克思号召产业无产阶级反抗工作的努力如出一辙。在GPLv3的第三版修订案发布时，开源软件团体中的许多成员都反对这种协议。尤其是Linux的核心开发小组，其中29个高级架构师有28个反对这个协议。Linus Torvalds称这个协议有“宗教性质”，并公开反对。而整个软件行业特别是开源社区对GPLv3的争论也愈演愈烈。GPLv3：大教堂和集市的新一轮对抗

2007年7月14日由CSDN与ThoughtWorks联合主办的第二届“敏捷中国”技术大会在北京丽亭华苑酒店召开，多位开源社区和ThoughtWorks公司的技术领袖即将带来精彩的演讲。本次“敏捷中国”技术大会集中展现塑造敏捷企业所需的方方面面：业界领先的敏捷项目管理工具；极大提升软件开发效率的新语言和新框架；数据库领域的敏捷实践；全方位的敏捷项目管理指导；还有身临其境的亲身体验。来自开源社区和ThoughtWorks公司的技术领导者们将带领听众全面感受敏捷企业。“敏捷中国大会”现场直击

从2004年起，在每年的夏季，CSDN都会举办面向中国程序员的大型网上调查活动。这是中国样本最丰富的开发者社区调查，持续、全面和深入地反映了中国开发者社群自身状况、各项技术、工具、产品的使用状况和发展趋势，是完整、准确地了解中国开发者市场的重要参考资料。本次调查覆盖基础信息、.NET、Java、C/C++、Web开发、数据库应用开发、软件工程及项目管理、移动及嵌入式开发、开放源代码、企业信息化等10个领域。还有惊喜大奖等着你哦，赶快进入吧！ 2007中国软件开发者大调查正式启动

推荐作者
  • 大宝大宝

    时间如流水，知惜方成功。

  • SkymanSkyman

    江苏人氏，梅兰芳之老乡。现游学渝州之最...

  • ralph623ralph623

新进作者
  • 冲 s冲 s

  • 小鱼小鱼

  • 棱角棱角

    多年J2EE构架设计与开发经验，专注于企业信息系统建设，精通Java设计模式，并能熟练的运用到企业开发中。 精通Struts与Spring框架。数据库方面精通Oracle数据库，从事过数据库方面的开发以及oracle优化方面的工作。

最新技术图书推荐

更多连载  更多图书

JavaScript 实现拖拽

发表日期:2006-12-02
更新日期:2006-12-02
作者文章阅读次数:1691

源自：野马笑了 (个人网站) 标签：

您认为本文应该得        共有1人参与打分打印|收藏|讨论|投诉

用javascript实现简单的拖拽

由于要实现一些拖拽，主要使用了prototpye.js,于是就使用了dragdrop.js, 在使用以前自己写了个简单拖拽，个人觉得原理是一致的。
1 对需要拖拽的部分处理mousedown事件，目的就是定为该object的parent
2 在其容器内处理处理mousemove，mouseup  mousemove目的就是规定移动的动作，mouseup的目的就是释放当前的操作object， 以可以实现下次的拖拽动作。
 


<html>
<head>
<style type="text/css">
.DragFrame{    
    position:absolute;    
    border:1px solid #000;    
    overflow:hidden;
}
.header{ 
    height:4px;
    background-color:#00F;
}


.ContentNow{
    font-size:0.7em;
    font-family:arial;
    padding:2px;
    padding-top:5px;
    overflow:hidden;

}
.footer{
    position:absolute;
    bottom:-1px;
    border-top:1px solid #000;
    height:4px;
    width:100%;
    font-size:0.8em;
    background-color:red;
}
</style>

<script type="text/javascript">
var dragObject = false;
var dragheader = false;
var dragfooter = false;
var orignalLength = 0;
function dragHeader(obj,ev)
{
  dragheader = true;  
    dragObject = obj.parentNode;     
    var dragLeft = dragObject.style.left.replace('px','')/1;
    e = ev;
    orignalLength   = e.clientX-dragLeft;
    return false;
}
function dragFooter(obj)
{    
     dragObject = obj.parentNode;     
     dragfooter = true;
     return false;  
}
function mouseUp(e)
{     
    if(!dragObject)return;        
    dragObject = false;    
    dragheader = false;
    dragfooter = false;    
    orignalLength = 0;
}
function mouseMove(e)
{
    if(document.all) e = event;    
        if(!dragObject)return;        
        var dragTop;
        var dragLeft;
        var tmpHeight;
        if( dragfooter )
        {
           dragTop = dragObject.style.top.replace('px','')/1;        
           tmpHeight = e.clientY - dragTop;        
           dragObject.style.height = tmpHeight + 'px';    
        }
        if( dragheader )
        {
           dragTop = dragObject.style.top.replace('px','')/1;                   
           dragLeft = dragObject.style.left.replace('px','')/1;
           //if(orignalLength > e.clientX-dragLeft)
              dragLeft = dragLeft+(e.clientX-dragLeft);       
         //  else
             // dragLeft = dragLeft-(e.clientX-dragLeft);           
           dragObject.style.top = e.clientY + 'px';    
           dragObject.style.left = e.clientX+ 'px';    
        }        
}
</script>

</head>
<body >

<div onmousemove="mouseMove(event)"  onmouseup="mouseUp(event)" style="width:1000px;height:800px" >
  <DIV class="DragFrame" style=" LEFT: 316px; WIDTH: 120px; TOP: 50px; HEIGHT: 103px; BACKGROUND-COLOR: #ffffff">
     <DIV class="header" onmousedown="dragHeader(this,event)" style="CURSOR: move;"><SPAN></SPAN></DIV>
     <DIV class="ContentNow" style="HEIGHT: 103px">
        <SPAN>Drag header or Drag the bottom!</SPAN>
     </DIV>
     <DIV id="resizeTest" class="footer"  onmousedown="dragFooter(this)" style="CURSOR: n-resize; BOTTOM: -1px">
        <SPAN></SPAN>
     </DIV>
  </DIV>

</div>

</body>
</html>

您认为本文应该得        共有1人参与打分打印|收藏|讨论|投诉

暂无图片

你可以使生活更精彩。

作者其他文章： 更多
相关文章：
评论

CSDN技术中心团队官方Blog：http://blog.csdn.net/techcenter/，反馈邮箱：techcenter at csdn.net （注意：请把 at 换成@）

网站简介－广告服务－网站地图－帮助－联系方式－诚聘英才－English－问题报告

北京创新乐知广告有限公司 版权所有, 京 ICP 证 070598 号

世纪乐知(北京)网络技术有限公司 提供技术支持

Copyright © 2000-2008, CSDN.NET, All Rights Reserved