jquery - jQuery adding sortable / draggable to isotope masonry

Question

Good morning,

I've a problem concerning the jQuery plugin isotope.

As you can see here on jsfiddle I have a grid with dynamic layout (you can click on a div and the size and the layout changes). Now I want to be able to sort the items in an other order by using jQuerys sortable. Adding this to the code:

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

Will make it draggable but without any sortable function.

What am I doing wrong?

TIA - With best regards, frgtv10

Answer 1

MetaFizzy にはPackeryと呼ばれる新しいプラグインがあり、これはあなたが望むことをするかもしれません。

詳細については、こちらをご覧ください: http://packery.metafizzy.co/draggable.html

Answer 2

サイズ変更を追加して、私の修正した gridster.js を使用できます。(石積み & ドラッグ可能も含まれています)

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

例: http://evalds.lv/gridster

Answer 3

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 ...

Answer 4

That's possible but with limitations. Take a look at http://tyler-designs.com/masonry-ui/