3

このjsFiddleをご覧ください。

私が達成しようとしているのは、ユーザーが3つのアイテムの1つを上にドラッグして、ソートされたリストにドロップできるようにすることです。現在プレースホルダーであり、そのアイテムがどのように表示されるかのプレビューを表示するために使用されるカスタムヘルパーを追加しました。

説明のために、ドラッグ可能な3つの要素がソースアイテムであり、ソート可能なリストに含まれるのはターゲットアイテムであるとします。私が苦労しているのstopは、ソート可能なリストの関数に適切なコンテンツを渡し、ソースアイテムのデフォルトのクローンではなく、そのコンテンツをリストに挿入することです。また、ソースアイテムとともにいくつかの追加情報を伝えたいと思います。たとえば、要素がドラッグ可能なソースアイテムのいずれかからのものであるのか、それとも並べ替えられているターゲットアイテムの1つであるのかを、停止関数で知りたいと思います。

コンソールをチェックすると、私が行った失敗した試みのいくつかを見ることができます。で値を設定してみましevent.dataたがTypeError: event.data is null、ソート可能リストの開始機能と停止機能があります。だから私はここで何かが欠けていると思います。

私の質問を繰り返すと、私が直面している2つの関連する問題があります。

  1. startソースアイテムがドラッグされているときから、並べ替え可能なリストのトリガーとstop機能のように見える並べ替え可能なリスト内にドロップされたときまで、データを渡すにはどうすればよいですか？
  2. ソースアイテムのデフォルトのクローンの代わりに、リスト内にカスタムdivを挿入するにはどうすればよいですか？

どんな助けでもありがたいです。

4

1 に答える 1

3

難しい質問です。

主な問題は、一緒に動作するウィジェットsortableとdraggableウィジェットが、要素自体ではなく要素のクローンを使用することです。

JQuerydataメソッドは要素のデータを格納するため、上記のクローン作成動作のため、情報を取得するのは簡単ではありません。

回避策は、単純なものを使用divして、イベントコールバックでデータを保存および取得することです。ドラッグされる要素は常に1つだけなので、機能しています。

コードとフィドルは次のとおりです：http：//jsfiddle.net/ghMaP/4/

<ul id="draggable">
    <li class="ui-state-default">Button</li>
    <li class="ui-state-default">Text Field</li>
    <li class="ui-state-default">Image</li>
</ul>

<ul id="sortable" class="ui-state-highlight">
</ul>

<!-- New div used to store and retrieve data of dragged element -->
<div id="tmp"></div>

</ p> 

$(document).ready(function() {

    //Shortcut on the temp div
    $tmp = $("#tmp").get(0);

    $("#sortable").sortable({
        start: function(event, ui) {
        },
        stop: function(event, ui) { 
            //Here, we retrieve data from the temp div
            console.log("isNew : ", jQuery.data($tmp, "isNew"));
            console.log("resultHTML : ", jQuery.data($tmp, "resultHTML"));
        }
    });

    $("#draggable li").draggable({
        connectToSortable: "#sortable",
        start: function(event, ui) {    

            //Store info in a tmp div         
            jQuery.data($tmp, "isNew", true);
            jQuery.data($tmp, "resultHTML", "<b>Here I will add some custom html to EVENT data</b>");

        },
        helper: function(event) {
            return "<div class='custom-helper'>Custom helper for " + $(this).context.innerHTML + "</div>";   
        },
        revert: "invalid"
    });
});​
于 2013-01-02T20:53:17.873 に答える