微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQueryUI Sortable 应用Demo(分享)

最近工作用需要设计一个自由布局的页面设计。我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录。

第一、单项目自由排序

下图效果

代码段:

rush:xhtml;">

html:

rush:xhtml;">

<script src="js/jquery-1.10.2.min.js">
<script src="js/bootstrap/js/bootstrap.min.js">

<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js">

Box_wrap" id="Box_wrap">
Box"> test1
Box"> test2
Box">test3

第二、多排序组之间自由拖拽

代码段:

rush:xhtml;">

html 代码

rush:xhtml;">

<script src="js/jquery-1.10.2.min.js">
<script src="js/bootstrap/js/bootstrap.min.js">

<script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js">

Box_wrap" id="Box_wrap1">
Box"> left-test1
Box"> left-test2
Box"> left-test3
Box"> test1
Box"> test2
Box"> test3

上面另种是工作中比较常用的排序形式。

以上这篇jQueryUI Sortable 应用Demo(分享)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文地址:https://www.jb51.cc/jquery/36608.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐