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 ...
随机推荐
- 网站压力测试工具之WebBench
1 Web Bench简介 WebBench是有名的网站压力测试工具,由Lionbridge公司开发,最多可以模拟3万个并发连接去测试网站的负载能力. Webbech能测试处在相同硬件上,不同服务的性 ...
- web测试 结果存储类型为“Database”,但尚未指定结果储存库连接字符串
vs2010 Ultimate版带有web测试功能,可以对网站的性能以及负载进行测试. 在进行负载测试时提示“异常 LoadTestConnectStringMissingException 1 Lo ...
- Apache中RewriteCond规则参数介绍(转)
CodeIgniter2.0已经出来有20多天了呢~也就是我一直用的php框架(CI).一直都在研究jquery,倒是把CI给忘到一边去了,呵呵~~今天公司事情不是很多,于是开始熟悉一下CI2.0的一 ...
- 转:JavaScript定时机制、以及浏览器渲染机制 浅谈
昨晚,朋友拿了一道题问我: a.onclick = function(){ setTimeout(function() { //do something ... },0); }; //~~~ 我只知道 ...
- js 选择器
a>b 获取a下面的直接子元素
- 修改MojoWeixin 只保留用户name 取消群昵称
<pre name="code" class="python"> if($msg->type eq "friend_message& ...
- AnyEvent::HTTP 介绍
AnyEvent::HTTP - simple but non-blocking HTTP/HTTPS client 一个简单的非堵塞的 HTTP/HTTPS 客户端: use AnyEvent::H ...
- 基于visual Studio2013解决C语言竞赛题之0205位数求和
题目
- 基于visual Studio2013解决C语言竞赛题之0202坐标转换
题目
- 学校作业-Usaco DP水题
好吧,因为USACO挂掉了,所以我写的所有代码都不保证正确性[好的,这么简单的题,再不写对,你就可以滚粗了! 第一题是USACO 2.2.2 ★Subset Sums 集合 对于从 1 到 N 的连 ...