jQueryUI：ソート可能な要素をドロップブルとバック（またはmootoolsの代替）に移動

Question

タイルを含むソート可能なものが1つあります。さらに、私にはたくさんの落下物があります。私は次の相互作用が欲しい：

ユーザーは、並べ替えののタイルをいくつかのdroppableにドラッグすることができます。理想的には、これはのタイルをソート可能に移動し、それをドロップ可能に追加します。加えて、ドロッブルブルはもはや何も受け入れるべきではない。すなわち、1つのドロッパーブル上に最大で1つのタイルが存在することがある。私はこのフィドルhttp://jsfiddle.net/yXeMw/2/でそれを試しましたが、 "動き"を働かせることはできません。

それが動作すると、ユーザーはまた、私はここに出てみました、ソート可能にドロップ可能なバックのからタイルを移動することができる必要があります：（削除リンクによる2つのリンクの制限には、そのバージョン3でした同じフィドル。）でも失敗する。 （私は、「移動する..へ..」の部分が同じでなければならないと思っているので警報だけを試みました）

私は数日間これを試してきました。それを理解する。

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

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

更新1：ドロップ可能 - ソート可能な内部の私のタイルを効果的に推移し0PXことは不可能自体ソート可能なサイズであることが作られたfloat: left属性を持っていたので>ソート可能な方向にのみ動作しませんでした。固定フィドル：http://jsfiddle.net/yXeMw/5/

アップデート2：私は（私の答えを参照）の回避策を見つけたもののが、私はまだ解決策移動要素を持っていると思います。 appendToまたはappendのいずれかを取得できませんでした。

Answer 1

私はそれをエミュレートする方法を見つけました。私は本当に要素を移動しないので、私はこのソリューションに100％満足していないので、私はより良い解決策を受け入れます。

代わりに、新しい要素を作成し、古い要素を削除してヘルパーを非表示にします。クローンとappendToの両方が動作していないようです。フィドルが迷子になる場合には、コードとしてhttp://jsfiddle.net/VyfkE/1/

Aswell：ここ

はフィドルです。

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(); 
    } 
});