jquery ui sortable实现网易邮箱模块拖放

作者:林炜贤来源:www.163css.com发表时间:(2013-01-14)

现在打开“http://jqueryui.com/”,如果你是IE6用户,也许你会看到页面是乱的,不过,没办法了,人家jquery ui已经到了1.9.2阶段了,我们今天这个作品,也只能在ie8以上的浏览器进行预览。。

我们做出来的东西,就是要类似于网易邮件的拖放,当然,我们是采用JQUERY UI来实现的:

这短短几行代码,我们就把功能实现了,可见jquery ui的强大。。

connectWidth表示我们可以拖动的div,这里我们分成两列,需要注意,column必须写上padding-bottom:183px,这个主要是为了实现div可以往上拖动。。。

我们把样式名为mid的div取消拖动效果。。对于disableSelecttion,它的作用是取消文字的选择,当然了,我们这里用了图片,看不出效果。。。

我们会注意到,拖动时,底下有个虚线,这里是通过样式实现的:

技术总是在不断地进步,IE6也成为技术发展的阻力,我们应该放弃它,学习新的技术。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2013/01/maildrag/index.html

下载地址:jquery ui sortable实现网易邮箱模块拖放.rar

返回作者主页:www.163css.com阅读 (6344)
更多 1