[英]jQuery UI Droppable accept condition with form submit
我正在尝试将可拖动的项目拖放到可放置区域。 但是,我想显示一个表单来输入信息并存储在数据库中。 存储信息后,可放置对象将成功放置,否则将其还原。
这是我遇到麻烦的代码:
$("#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发布到后端控制器。
如果用户单击“取消”或提交失败,我想使便笺恢复原状。
提前致谢。
未定义此函数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();
}
});
希望对您有所帮助,谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.