3

これについてあなたの助けが本当に必要です。私はこれを正しくするために一生懸命努力してきましたが、私はそれをすることができません..

jsfiddle: http://jsfiddle.net/5Vyq8/13/

js コード:

$(document).ready(function () {

    // Treetable
    $("table").treetable({
        expandable: true,
        initialState: "expanded",
        expanderTemplate: "<a href='#'>&nbsp;&nbsp;&nbsp;&nbsp;</a>",
        indent: 24,
        column: 0
    });

    // Draggable
    $("table .draggable").draggable({
        opacity: .75,
        refreshPositions: true,
        revert: "invalid",
        revertDuration: 300,
        scroll: true,
        delay: 100,
        cursor: 'move'
    });

    //Droppable
    $("table tbody tr").each(function () {
        $(this).droppable({
            accept: ".draggable",
            hoverClass: "append-to-task",
            over: function (e, ui) {         

                // add class 'accept-incoming-task' to the row under after 1 second
            },
            out: function () {

            },
            drop: function (e, ui) {

                var droppedEl = ui.draggable;
                // Adds the task as the first child to dropped row
                $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
            },
        });
    });
});

私が達成しようとしているのはこれです：

  1. 行を別の行にドラッグします (完了!)
  2. 1秒以上ホバリングしている間、下の行にクラスを追加する必要があります
  3. まだホバリングして他の行に移動すると、前のステップで追加されたクラスが削除されます

私はあなたの時間と助けに感謝します.

4

2 に答える 2

1

http://jsfiddle.net/snowMonkey/7yEaU/をご覧ください

$("table tbody tr").each(function () {
    var that=this;
    $(this).droppable({
        accept: ".draggable",
        over: function (e, ui) { 
            // add class 'accept-incoming-task' to the row under after 1 second
            hoverTimeout = setTimeout(function(){
                $(that).addClass("append-to-task");
            }, 1000);
        },
        out: function () {
           clearTimeout(hoverTimeout);
            $(that).removeClass("append-to-task");
        },
        drop: function (e, ui) {

            var droppedEl = ui.draggable;
            // Adds the task as the first child to dropped row
            $("table").treetable("move", droppedEl.data("ttId"), $(this).data("ttId"));
        },
    });
});

あなたのステップ2が機能しています。最初に行う必要があるのは、ホバーから hoverClass を削除することです。タイムアウトの遅延後に手動でプルします。

次に、これ以外に hoverTimeout 変数を作成します (これにより、hover コールバックと out コールバックの両方からアクセスできます)。

3 番目に、over: コールバックで、hoverTimeout を 1000ms に設定し、トリガー時にクラスを追加します。

最後に、out コールバックで、タイムアウトをクリアしてクラスを削除します。

これにより、ステップ 2 と 3 の両方が処理されますが、ドロップされたアイテムをドロップしてキャッチャーに追加することはできません。それが役に立てば幸い！

于 2013-08-02T16:56:03.237 に答える