jQueryUI Sortable 应用Demo(分享)
最近工作用需要设计一个自由布局的页面设计。我选了jQuery UI 的 sortable ，可以拖拽，自由排序 使用很方便，写一个demo，做个记录。
第一、单项目自由排序
下图效果
代码段：
<script type="text/javascript"> $(function () { $("#box_wrap").sortable({ helper: "clone", placeholder: "box-holdplace", sort: function (e, ui) { //排序时触发事件 }, // handle: ".handle",//指定元素内的某种元素才可以拖动，非常有用 }).disableSelection(); }); </script>
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<!--Sortable -->
<script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="box_wrap" id="box_wrap">
<div class="box">
test1
</div>
<div class="box">
test2
</div>
<div class="box">test3
</div>
</div>
</body>
</html>
第二、多排序组之间自由拖拽
代码段：
<script type="text/javascript">
$(function () {
$("#box_wrap1,#box_wrap2").sortable({
connectWith: ".box_wrap",
helper: "clone",
cursor: "move",//移动时候鼠标样式
opacity: 0.5, //拖拽过程中透明度
placeholder: "box-holdplace",//占位符className，设置一个样式
}).disableSelection();
});
</script>
html 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="js/bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<link href="js/bootstrap/css/bootstrap-theme.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<link href="css/index.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap/js/bootstrap.min.js"></script>
<!--Sortable -->
<script src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="column col-md-6">
<div class="box_wrap" id="box_wrap1">
<div class="box">
left-test1
</div>
<div class="box">
left-test2
</div>
<div class="box">
left-test3
</div>
</div>
</div>
<div class="column col-md-6">
<div class="box_wrap" id="box_wrap2" >
<div class="box">
test1
</div>
<div class="box">
test2
</div>
<div class="box">
test3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
上面另种是工作中比较常用的排序形式。
以上这篇jQueryUI Sortable 应用Demo(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持小牛知识库。
-
在本章中，我们将重点介绍如何在CherryPy框架中创建应用程序。 考虑将Photoblog应用程序用于CherryPy的演示应用程序。 Photoblog应用程序是一个普通的博客，但主要文本将是照片代替文本。 Photoblog应用程序的主要功能是开发人员可以更专注于设计和实现。 基本结构 - 实体设计 实体设计应用程序的基本结构。 以下是Photoblog应用程序的实体 - Film Phot
-
本文向大家介绍python snownlp情感分析简易demo(分享)，包括了python snownlp情感分析简易demo(分享)的使用技巧和注意事项，需要的朋友参考一下 SnowNLP是国人开发的python类库，可以方便的处理中文文本内容，是受到了TextBlob的启发而写的，由于现在大部分的自然语言处理库基本都是针对英文的，于是写了一个方便处理中文的类库，并且和TextBlob不同的是，
-
本文向大家介绍iOS自定义日期demo分享，包括了iOS自定义日期demo分享的使用技巧和注意事项，需要的朋友参考一下 有个项目需求是做个在日期上选择的，就是这种: 网上看了几个日期的demo都太厚重了,移植起来太麻烦,然后打算自己写。 就先写个简化的demo看看,主要有几个关键点: 首先要根据当前日期获取这个月有几天 然后判断这个月份第一天是周几 再根据上面两个数据在合理的位置显示数据 还要记录
-
Bootstrap提供了一些辅助类，以便更快地进行移动友好的开发。 这些可以用于通过媒体查询显示和隐藏内容，并结合大，小和中型设备。 谨慎使用这些，避免创建完全不同版本的同一站点。 Responsive utilities are currently only available for block and table toggling 。 类 设备 .visible-xs visible超小（小
-
本文向大家介绍java之Timer和TimerTask简单demo(分享)，包括了java之Timer和TimerTask简单demo(分享)的使用技巧和注意事项，需要的朋友参考一下 代码：测试类 TimerTask任务类 以上这篇java之Timer和TimerTask简单demo(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
1.简介 Qt Demo 是 Qt 套件之一，它包含了大量的演示和示例程序，基本涵盖了 Qt 编程中的 主要类别，将它与 Qt Assistant 结合使用能够收到很好的效果。 2.运行 Qt Demo 要运行 Qt Demo，在 Windows 下，如果是可依次单击【开始】→【（所有）程序】→【Qt SDK by Nokia v2009.03(OpenSource)】→【Qt Demo】；在 X