最近一个项目需要用到拖曳的方式来个性化页面,搜索了下网上找到很多代码,不过能大致符合我的要求同时还能方便使用的方法很少,少但是起码还有,这里我向各位看客推荐两种实现方法
1 直接利用javascript来实现,利用mousemove和mousedown事件来取得拖曳必须的数据。
方法1相关网页链接:
http://www.webreference.com/programming/javascript/mk/column2/index.html
http://www.7ibu.com/developer/programme/2007/0128/723.htm
2 基于方法1同时利用protype.js来实现,并且相对方法一更让人容易理解,因为写法有面向对象的风格。
方法2相关网页链接:
http://www.7ibu.com/developer/programme/2007/0128/724.htm
如果你是如同我一样仅仅打算简单的改动一下的话,那么请注意以下几个地方
方法1中如果拖曳的元素没有子元素的话,那么实现拖曳是没有任何问题,一旦含有子元素的话,那么如果不对代码进行改动的话,一旦鼠标移动到子元素的的话,是没有任何反应(具体你可以调试drag_drop.js中的mousemove事件),由于时间关系,我也并没有仔细去探究具体该如何改动。
由于我的拖曳元素肯定得含有子元素,不然无法很好的进行个性化表现,本来看到杭州政府网里面有个个性化定制的功能(主页右下角)后打算去相应的页面偷下其中的js,不过可惜的是,页面源代码中列出的js文件都没有相关的功能函数,所以放弃了(ps:如果有人能帮忙弄出这个js的话不胜感激,当然是在不触犯别人的权益的情况下),经过仔细的搜索查找,总算找到了方法2。
看到方法2 的js代码我不得不感到自己对于js的认识还是很浅薄,看看别人是如何利用oo的思想用protype进行扩展,再看看自己写的那些代码,又臭又长。等考完系分后我一定要抽一段时间系统的学习js的高级编程!
废话不说。方法2 的确看上去很美,可是真正要改到自己能用的话,一定要注意以下几个地方:
1 网页的编码
2 元素的样式
3 js文件的加载次序
尤其是3一定要注意原文的那3个js是如何加载的!而且如果不做改动是缺一不可!不然拖曳是做不成的!