0

他の div 要素内に div をドラッグすると問題が発生します。

HTML は次のようになります。

<div id="grid">
    <div id="el1" style="width:300px"></div>
    <div id="el2" style="width:100px"></div>
    <div id="el3" style="width:100px"></div>
    <div id="el4" style="width:100px"></div>
</div>

すべての要素はドラッグ可能で、css スタイルを持っていfloat:left;position:relative;ます。el1その場所にドラッグするel3と動作しますが、もちろん要素と重なってしまいますel3。Dragginは正常に動作していますが、この位置の HTML コードにjquery draggableid を持つ div を挿入したいと考えています。el1

次のようになります。

<div id...>
    <div id="el2...
    <div id="el3...
    <div id="el1...
    <div id="el4...
</div>

私の問題は、これがグリッドであることです。el1「300」の幅を持ち、他のすべての幅は「100」です。should swapのel1場所にドラッグし、 の場所との場所にドラッグします。el3el2el3el4el1el1el2, el3, el4

divこの動作を実現するには、 HTML コードを の後に移動する必要があると思いますel4。しかし、どの要素が最も近いかを判断するにはどうすればよいでしょうか?

- - - - 更新しました - - - -

私はソート可能を使用しようとしています...ここを参照してくださいhttp://jsfiddle.net/vwK5e/2/ しかし、赤いボックスを3番の上に置くと、赤いボックスは2行目に表示されますが(正しい)、4番にする必要があります空きスペースの3番目の原因の隣にあります。

TIA frgtv10

4

2 に答える 2

3

http://jqueryui.com/demos/sortable/#display-gridを参照してください

このような機能が必要だと思います。

答え

別の種類の jquery ソート可能

于 2012-07-18T10:52:03.323 に答える
0

私のソリューションは次のようになります。

draggable私が現在使用しているjQueryの代わりに（ sortableへのsortableリンク）。これに加えて、私は jQuery プラグインの助けを借りています(石工へのリンク)masonry

例：

// Masonry
$('#container').masonry({
    itemSelector: '.element',
    isResizable: true,
    columnWidth: 100
})


// Sortable 
$('#container').sortable({
    items: '.element',
    forcePlaceholderSize: true,
    placeholder: 'card-sortable-placeholder element',
    tolerance: 'pointer',
    handle: '.handle',
    cursor: 'move',
    cancel: '.notdrag',

    start:  function(event, ui) {     
            ui.item.addClass('dragging').removeClass('element');
            ui.item.parent().masonry('reload')
        },
    change: function(event, ui) {
               ui.item.parent().masonry('reload');
        },
    stop:   function(event, ui) { 
               ui.item.removeClass('dragging').addClass('element');
               ui.item.parent().masonry('reload');
        }

    });
于 2012-07-19T09:48:26.780 に答える