jQuery ui中的拖拽

阅读更多
jQuery ui 的拖拽


在jQuery的拖拽出现之前,在页面上写一个能实现拖拽效果的JS很麻烦,需要监听鼠标的动作,位置等等,代码也比较冗长,而用jQuery ui就会起到事半功倍的效果.

这里介绍一个利用sortable排序列表来实现的拖拽功能.
直接上代码







 














 
 
 
 
Black iPhone 4
White iPhone 4S
Baidu

这个例子是从一个真实的PORTAL项目里提炼简化而来的,可以看出,JS的代码量非常少,简明扼要.,首先通过value.appendChild(vae);
这个方法把对应的DIV读取到可排序列表的框架里去(#portal_view .column),这样做的目的是为了配合页面拖拽排版的持久化,当从数据库或者其他持久化层中把页面几个可排序块的内容读取出来后,按照存入的顺序依次分配到对应的排序列表表格中去,而和拖动有关的内容全部都在.sortable这个API里配置,包括透明度,回退等等各个参数,具体可以参考官方的API文档.

大家可以试一下.
  • jQuery ui中的拖拽_第1张图片
  • 大小: 22.5 KB
  • 查看图片附件

你可能感兴趣的:(jquery,ui,html,拖拽)