jQuery的加入可排序/可拖動到同位素磚石

我有關於jQuery插件isotope問題。

enter image description here

正如你可以看到here on jsfiddle我有一個動態佈局的網格（您可以點擊一個div和大小和佈局的變化）。現在我想通過使用jQuerys sortable以其他順序對items進行排序。添加此的代碼：

$container.sortable({ 
    items: '.item' 
});

將它拖動，但沒有任何排序功能。

我在做什麼錯？

TIA - 與問候， frgtv10

來源

2012-07-24 frgtv10

jQuery的同位素不支持拖動的元素，見http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/ – Systembolaget 2012-07-24 12:16:06

這是我想要的東西非常糟糕！我正在考慮打擊作者，試圖合作並實現這一目標！這將是自切片面包以來最好的事情！ – Chev 2012-08-10 21:19:33

這是可能的，但有限制。看看 http://tyler-designs.com/masonry-ui/

來源

2012-11-01 11:41:54 Entea

和同位素/石工作者的相關博客文章：http://metafizzy.co/blog/mythical-drag-drop-multi-column-grid-plugin/ – ptim 2013-04-08 06:03:24

MetaFizzy有一個名爲Packery的新插件，它可以做你想做的。

在這裏看到更多：http://packery.metafizzy.co/draggable.html

來源

2013-04-24 13:34:29

你可以用我gridster.js的修改與調整大小添加的。（也磚石&拖動含稅）

https://github.com/evaldsurtans/gridster.js

例子： http://evalds.lv/gridster

來源

2013-04-24 15:21:47

這個例子的URL現在是404。 – 2013-07-10 20:32:59

謝謝，我將恢復在線 – 2013-07-22 08:24:37

示例沒有在Chrome中工作:( – Maxx 2013-10-11 18:32:02

我給你一個鏈接的jsfiddle ...退房，他們都使用jQuery的可拖動和同位素。

http://jsfiddle.net/ganeshgaxy/yL3Lu/

$(document).ready(function() { 
    $('#inner').isotope({ 
     itemSelector: '.gravity' 
    }); 
    var list = $('#inner'); 
    list.sortable({ 
     cursor: 'move', 
     start: function (event, ui) { 
      ui.item ...

來源

2014-08-12 09:45:21

不是真正的砌體因爲所有的元素都有相同的尺寸 – Ben 2014-10-29 00:01:20

LGTM！它工作的很好！@Ben：它也可以使用可變的高度。 – xxxbence 2016-09-21 11:20:07

jQuery的加入可排序/可拖動到同位素磚石

回答

相關問題