带有表单提交的jQuery UI Droppable接受条件答案

【问题标题】：jQuery UI Droppable accept condition with form submit带有表单提交的jQuery UI Droppable接受条件
【发布时间】：2023-04-01 02:41:01
【问题描述】：

我正在尝试制作一个可拖动的项目以放置到可放置区域。但是，我想显示一个表单来输入信息并存储在数据库中。存储信息后，droppable 成功，否则将项目还原。

这里是the jsFiddle I made来演示。

这是我遇到问题的一段代码：

$("#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 post 到后端控制器。

如果用户点击取消或提交失败，我想让便笺恢复原状。

提前致谢。

【问题讨论】：

标签： javascript jquery html jquery-ui-droppable

【解决方案1】：

工作DEMO

这个函数没有定义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();
    }
});

希望对你有帮助，谢谢

【讨论】：