isotope/masonry 使用jQuery.sortable
function goMasonry() {
// if ($container.data('masonry') != undefined) {
$container.isotope('destroy');
}
$container.isotope({
itemSelector: '.element',
// transformsEnabled: false,
animationEngine: 'jquery',
animationOptions: {
duration: 750,
easing: 'swing',
queue: true
},
masonry: {
columnWidth: columnWidthT,
gutterWidth: gutterWidthT,
cornerStampSelector: '.corner-stamp'
}
}, myCallBack);
}
isotope方法
$('#container').sortable({
placeholder: {
element: function (currentItem) {
return $("<li class='thumb element isotope-item rqq' style='margin: 1px; height: " + (currentItem.height() - 4) + "px; width: " + (currentItem.width() - 4) + "px; vertical-align: middle; text-align: center; outline: none; border: 1px dashed black; background-color: #97dd52;'></li>")[0];
},
update: function (container, p) {
return;
}
},
tolerance: function (currentItem) {
return 'pointer';
},
items: 'li',
opacity: 0.6, helper: function (event, element) {
var clone = $(element).clone();
clone.removeClass('isotope-item');
clone.removeClass('element');
element.removeClass('isotope-item');
element.removeClass('element');
return clone;
},
stop: function (event, ui) {
ui.item.addClass("isotope-item");
ui.item.addClass("element");
goMasonry(); },
change: function () { },
sort: function () {
goMasonry(); }
});
sortable方法
<ul id="container">
<li class="thumb element"></li>
<li class="thumb element"></li>
<li class="thumb element"></li>
<li class="thumb element"></li>
</ul>
Html 格式
http://api.jqueryui.com/sortable/
http://masonry.desandro.com/
http://isotope.metafizzy.co/docs/introduction.html
实例 http://tyler-designs.com/masonry-ui/
isotope/masonry 使用jQuery.sortable的更多相关文章
- jquery.sortable.js源代码解读
/* * HTML5 Sortable jQuery Plugin * http://farhadi.ir/projects/html5sortable * * Copyright 2012, Ali ...
- jquery sortable的拖动方法内容说明和示例详解(转载http://www.jb51.net/article/45803.htm)
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 u ...
- jquery sortable的拖动方法示例详解1
转自:https://www.jb51.net/article/45803.htm 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper ...
- jquery sortable的拖动方法示例详解
转自:https://hb-keepmoving.iteye.com/blog/1154618 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 u ...
- 10+ 最流行的 jQuery Tree 菜单插件
jstree – jQuery Tree Plugin With HTML & JSON Data jstree is a lightweight and flexible jQuery pl ...
- 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限
先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...
- 黄聪: 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- 为你下一个项目准备的 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- jsp 路径问题
<script type="text/javascript" src="<%=ApplicationContextUtil.getBasePath(r ...
随机推荐
- JDBC----数据库连接池(connection pool)
•数据库连接池的基本思想就是为数据库连接建立一个"缓冲池".预先在缓冲池中放入一定数量的连接,当需要建立数据库连接时,只需从"缓冲池"中取出一个,使用完毕之后再 ...
- jQuery 动态元素添加
有这么一道题 <!DOCTYPE html> <head> <title>前端工程师面试题</title> <meta http-equiv=&q ...
- utf8格式源代码中的字符串,默认都会当作char来处理,除非用L""符号来修饰
原先QString("mystrr"),现在都不认了,必须都要加上L才行 原先:m_conn->put_HttpProxyAuthMethod("Basic&quo ...
- 关于R.styleable的问题
原来想直接想调用程序的东西,但是使用R.styleable的时候 eclipse不能解析了,后来发现原来被删除了此方法 public ImageAdapter(Context c) { mContex ...
- Uva 511 Updating a Dictionary
大致题意:用{ key:value, key:value, key:value }的形式表示一个字典key表示建,在一个字典内没有重复,value则可能重复 题目输入两个字典,如{a:3,b:4,c: ...
- android错误之android.content.res.Resources$NotFoundException:
错误:android.content.res.Resources$NotFoundException: String resource ID #0x1 原因:一般发生在参数 int resId 错误, ...
- android 项目中使用到的网络请求框架以及怎样配置好接口URL
我们在做项目中一定少不了网络请求,如今非常多公司的网络请求这块好多都是使用一些比較好的开源框架,我项目中使用的是volley,如今讲讲一些volley主要的使用,假设想要具体的了解就要去看它的源代码了 ...
- 【JavaScript】双引号问题
拼装字符串是遇到双引号冲突问题. 最后用"代替了平时的转码手段.
- D - 二叉树遍历(推荐)
二叉树遍历问题 Description Tree Recovery Little Valentine liked playing with binary trees very much. Her ...
- Xcode5 创建模板和UIView 关联XIB
转自:http://www.cnblogs.com/china-ldw/p/3533896.html 在做ios应用开发的过程,难免遇到要创建 子view 和 自定义view的时候,归根到底,我们需要 ...