[英]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.