web-dev-qa-db-ja.com

jquery UI sortable：「プレースホルダー」オブジェクトの外観を変更するにはどうすればよいですか？

http://jqueryui.com/demos/sortable/#placeholder の例では、プレースホルダーは、アイテムをドラッグしたときに表示されるオレンジ色のボックスです。

この要素はplaceholderオプションを使用して調整できますが、ここで説明するように要素のクラスを変更することしかできません。 http://jqueryui.com/demos/sortable/#options

この要素をさらにカスタマイズしたいと思います。 placeholderオプションに関数を提供できるのと同じ方法で、helperオプションに関数を提供します。

これを行うには、何を変更する必要がありますか（例：sortable.js）？

jqueryjquery-uijquery-ui-sortable
49
brahn

Ui.sortable.js（1.7.2）のソースを見ると、placeholder関数とelement関数を使用して、updateをチートしてオブジェクトに設定できます。 element関数はプレースホルダーdomオブジェクトを返すために使用され、update関数を使用すると、そのサイズを修正することができます（以下の場合、sortable内の__createPlaceholder_関数をチェックアウトできます）デフォルトの実装が何をするのかを見たい）。

たとえば、次の例では、Wordtestをプレースホルダーとしてリスト項目を作成します（実際のdomオブジェクト（_[0]_）jQueryオブジェクト自体ではありません）：

_$("#sortable").sortable({
    placeholder: {
        element: function(currentItem) {
            return $("<li><em>test</em></li>")[0];
        },
        update: function(container, p) {
            return;
        }
    }
});
_

ソースを正しく読んでいる場合、element関数に現在のアイテム（jQueryオブジェクト）を渡す必要があり、thisはsortable自体を指す必要があります（つまり、$("#sortable") この場合には）。 updateには、すべてのオプション、要素など、およびplaceholder自体を保持するオブジェクトである「コンテナ」が渡されます。

これは文書化されていないハックであることに注意してください、したがって明らかにサポートされず、jQuery UIの次のバージョンで変更される可能性があります...しかし、あなたが話していれば、それはあなたにとって有用かもしれませんとにかく直接_ui.sortable.js_を編集します。

お役に立てば幸いです。

90
Alconja

私が見つけたよりハック的なアプローチ：startオプションを使用してプレースホルダー要素を変更できます。次のように

$("#sortable").sortable({
    start: function (e, ui) { 
      // modify ui.placeholder however you like
      ui.placeholder.html("I'm modifying the placeholder element!");
    }
});
53
brahn