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(分享)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
jquery sortable的拖动方法示例详解
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 ui.position - 表示相对当前对象,鼠标的坐标值对象{top,left} ui.offset - 表示相对于当前页面,鼠标的坐标值对象{top,left} ui.item - 表示当前拖拽的元素 ui.placeholder - 占位符(如果有定义的话) ui.sender - 当前拖拽元素的所属
-
jquery ui sortable拖拽后保存位置
jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用 var arr = $( ".sortable" ).sortable('toArray'); 记录拖拽后的id数组顺序,然后把这个数组存起来,可以存cookie,数据库,localstorage等,刷新页面后读取这个数组,然后进行重新排序. 具体的代码如下可直接复制运行.本文将数组保存在localst
-
jQueryUI Sortable 应用Demo(分享)
最近工作用需要设计一个自由布局的页面设计.我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录. 第一.单项目自由排序 下图效果 代码段: <script type="text/javascript"> $(function () { $("#box_wrap").sortable({ helper: "clone", placeholder: "box-holdplac
-
原生ajax瀑布流demo分享(必看篇)
最近听朋友们说起瀑布流挺多的,自己就去研究下了,一个简单的原生demo,分享给大家... 简单分为三个文档,有详细的注释:img:ajax.php:demo.php 其中img文件夹中放入图片 1.jpg:2.jpg;3.jpg.... ajax.php页面 <?php //模拟从数据库读取数据 $arr = array(); $op = opendir('./img'); //打开目录 //循环读取目录 while (($file = readdir($op)) !== false) { //
-
java之Timer和TimerTask简单demo(分享)
代码:测试类 public class MyTestTimer { public static Timer mTimer; public static void main(String[] args) { mTimer=new Timer(); MyTimerTask testTimer=new MyTimerTask(10000); mTimer.schedule(testTimer, 10000); } } TimerTask任务类 public class MyTimerTask exte
-
dom4j操作xml的demo(分享)
废话不多说,直接上代码 package com.cn.shop.util; import java.io.File; import java.io.FileOutputStream; import java.io.OutputStreamWriter; import java.util.Iterator; import java.util.List; import org.dom4j.Attribute; import org.dom4j.Document; import org.dom4j.D
-
基于复选框demo(分享)
本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>复选框demo</title> <script src="../js/jquery-1.10.2.js" type="text/javascript"&g
-
python snownlp情感分析简易demo(分享)
SnowNLP是国人开发的python类库,可以方便的处理中文文本内容,是受到了TextBlob的启发而写的,由于现在大部分的自然语言处理库基本都是针对英文的,于是写了一个方便处理中文的类库,并且和TextBlob不同的是,这里没有用NLTK,所有的算法都是自己实现的,并且自带了一些训练好的字典.注意本程序都是处理的unicode编码,所以使用时请自行decode成unicode.MIT许可下发行. 其 github主页 我自己修改了上文链接中的python代码并加入些许注释,以方便你的理解:
-
WCF实现进程间管道通信Demo分享
一.代码结构: 二.数据实体类: using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Serialization; using System.Text; using System.Threading.Tasks; namespace DataStruct { /// <summary> /// 测试数据实体类 /// </summary> [DataContr
-
Spring AOP入门Demo分享
在阅读本文之前,大家可先行参阅<简单理解Spring之IOC和AOP及代码示例>一文,简单了解下ioc和aop的相关内容.下面进入正题. 本文将会一步一步创建一个最简单的例子,来使用Spring的AOP特性,算是一个Spring AOP的入门Demo.作为一个初学者,运行出这么简单的一个Demo也踩了很多的坑. OOP的问题,AOP的补充 当我们需要为分散的对象引入公共行为的时候,OOP则显得无能为力.也就是说,OOP允许你定义从上到下的关系,但并不适合定义从左到右的关系.例如日志功能.日志代
-
Python读写/追加excel文件Demo分享
三个工具包 python操作excel的三个工具包如下,注意,只能操作.xls,不能操作.xlsx. • xlrd: 对excel进行读相关操作 • xlwt: 对excel进行写相关操作 • xlutils: 对excel读写操作的整合 这三个工具包都可以直接使用pip进行下载: sudo pip install xlrd sudo pip install xlwt sudo pip install xlutils1 xlwt的缺陷 xlwt只能创建一个全新的excel文件,然后对这个文件进行
-
Hibernate之环境搭建及demo分享
ORM概念 ORM即Object/Relation Mapping, 对象/关系数据库映射.ORM是一种规范,完成面向对象编程语言到关系数据库之间的映射.J2EE中的JPA就是一种ORM规范. ORM框架有很多,例如JPA, Hibernate,iBATIS等. Hibernate简介 Hibernate是JBoss旗下,同时也是RetHat组织的产品(JBoss加入了RetHat),是目前非常流行的ORM框架. Hibernate中的重要概念为PO(Persistent Object), Hi