1

ドラッグ可能なアイテムをドロップ可能なゾーンにドロップしようとしています。しかし、フォームを表示して情報を入力し、データベースに保存したいと考えています。情報が保存されると、ドロップ可能が成功します。それ以外の場合は、アイテムを元に戻します。

これが、デモンストレーション用に作成した jsFiddle です。

ここに私が問題を抱えているコードがあります：

$("#taskClosed").droppable({
  accept: function(el) {
    console.info(el.parent().parent().attr("id"));
    if ((el.parent().parent().attr("id") == "wrapper_taskAssigned") &&
      (el.position().left > $("#taskAssigned").width())) {
      if (closeTask(el) == true) return true;
      // need some improvement here
    }
    return false;
  },
  drop: function(event, ui) {
    // will perform drop item
  }
});
// handle the task close event
function closeTask(el) {
  $("#taskcloseForm-header").empty().append("Close task  " + el.data("name"));
  $("#popupCloseTask").popup("open");
}

タスク 2 を [終了したタスク] 列に移動できるようにしたいと考えています。これにより、情報を入力するためのフォームがポップアップ表示されます。送信後、フォームは別の関数を呼び出して、バックエンド コントローラーへの Ajax ポストを実行します。

ユーザーがキャンセルをクリックした場合、または送信が失敗した場合に、付箋を元に戻したいと思います。

前もって感謝します。

4

1 に答える 1

2

ワーキングデモ

この関数は定義されていませんcloseTask(el)。

if ((el.parent().parent().attr("id") == "wrapper_taskAssigned") &&
      (el.position().left > $("#taskAssigned").width())) {
      if (closeTask(el) == true) return true;   // this function was not defined
      // need some improvement here
    }
    return false;

ポップアップを機能させるためだけに削除しました

ajaxを使用してフォームを送信し、キャンセルボタンのクリック時にドラッグ可能を元の位置に戻すために、このコードを追加します

       /** get the original position of draggable**/
    $("li[id='draggable']").data("Left", $("li[id='draggable']").position().left)
        .data("Top", $("li[id='draggable']").position().top);

       /** ajax form submit**/
    $("#closetaskForm-submit-button").click(function () {
        $.ajax({
            url: '/echo/html/',  // change the url 
            data: $('#form').serialize(),
            success: function (data) {
                alert('succes');
            }
        });

    });
             /** restore draggable to original position**/
    $("#closetaskForm-cancel-button").click(function () {
    $("#popupCloseTask").popup("close");
    $("li[id='draggable']").animate(
                { "left": $("li[id='draggable']").data("Left"), 
                    "top": $("li[id='draggable']").data("Top")
                }, "slow");
    });

          /**avoid popup closing on outside popup click**/
$("#popupCloseTask").on({
    popupbeforeposition: function () {
        $('.ui-popup-screen').off();
    }
});

これが役に立てば幸いです、ありがとう

于 2013-09-21T08:06:32.307 に答える