1

タイルを含む並べ替え可能なものが1つあります。さらに、私はたくさんのドロップ可能なものを持っています。次のインタラクションが必要です。

ユーザーは、タイルを並べ替え可能なものからドロップ可能なものにドラッグできます。理想的には、これによりタイルが並べ替え可能から移動され、ドロップ可能に追加されます。さらに、ドロップ可能オブジェクトはもう何も受け入れないようにする必要があります。つまり、1つのドロップ可能オブジェクトに最大で1つのタイルが存在する可能性があります。このフィドルhttp://jsfiddle.net/yXeMw/2/で試しましたが、「移動」を機能させることができません。

それが機能すると、ユーザーはタイルをドロップ可能からソート可能に戻すこともできるはずです。これは、ここで試しました:( 2つのリンク制限のためにリンクを削除しました。同じフィドルのバージョン3でした）が失敗します。（「..から..への移動」の部分は同じであると思うので、アラートでのみ試しました。）アップデート1を参照してください。

私はこれを数日間試しましたが、理解できません。

PS：私はここSOで同様の質問をたくさん読みましたが、実際には私の問題と同じものはありません。つまり、要素をソート可能からドロップ可能に移動します。

編集：Mootoolsを使用した代替ソリューションも歓迎します。

更新1：ドロップ可能->ソート可能方向のみが機能しませんでした。これは、ソート可能内のタイルに、ソートfloat: left可能自体のサイズが実質的に0pxになり、ホバリングが不可能になる属性があったためです。修正されたフィドル：http：//jsfiddle.net/yXeMw/5/

更新2：回避策を見つけましたが（私の答えを参照）、要素を移動するソリューションが必要です。appendTo私は何も、または働くことができませんでしappendた。

4

1 に答える 1

1

それで、私はそれをエミュレートする方法を見つけました。このソリューションは実際には要素を動かさないため、100％満足しているわけではないので、より良いソリューションを受け入れます。

むしろ、新しい要素を作成し、古い要素を削除してヘルパーを非表示にします。cloneとappendToの両方が機能していないようです。

これがフィドルです：http：//jsfiddle.net/VyfkE/1/

フィドルが失われる場合のコードと同様に。

html：

<div class="slot">Drop one here</div>
<div class="slot">Or one here</div>

<div class="sortable">
    <div class="tile">item 1</div>
    <div class="tile">item 2</div>
    <div class="tile">item 3</div>
</div>

css：

.slot {
    background-color: forestgreen;
    width:100px;
    height:100px;
    border: 1px solid black;
}

.sortable {
    display:table-row;
    background: #44F;
}

.tile {
    display:table-cell;
    background: firebrick;
    border: 1px solid black;
    width: 50px;
    height: 25px;
}

そして最後にjavascript：

$(".slot").droppable({
    drop: function(ev, ui) {
        // Only want one tile per droppable!
        if ($(this).children().length === 0) {
            // Create the new element which will be inside the droppable.
            cl = $('<div>').addClass('tile').text(ui.draggable.text()).css({
                background: 'cornflowerblue'
            });
            // Make it draggable back into the sortable.
            cl.draggable({
                connectToSortable: '.sortable',
                helper: 'clone' // <-- This is important!
            });
            $(this).append(cl);

            // And remove the element from the sortable.
            ui.helper.hide();
            ui.draggable.remove();
        }
    }
});
$(".sortable").sortable({
    connectWith: '.slot',
    revert: true,
    helper: 'clone', // <-- This is important, again!
    receive: function(ev, ui) {
        // If we get some item from a droppable, remove it from there.
        ui.item.remove();
    }
});
于 2012-03-06T08:42:10.833 に答える