从可掉落的物品中找到 child div 和 class
from a droppable item find child div with class
当拖放项目以将更改写入数据库时,我需要从拖放项目内的 div 获取 html。
我似乎无法通过使用 closest('task-type').html() 成功获得 html,我不确定为什么。
我正在尝试使用接收事件。这是我目前所拥有的jsfiddle,任何帮助都会很棒。
这是代码
var $container = $(".task-container");
var $task = $('.todo-task');
$task.draggable({
addClasses: false,
connectToSortable: ".task-container",
});
$container.droppable({
accept: ".todo-task"
});
$(".ui-droppable").sortable({
placeholder: "ui-state-highlight",
opacity: .5,
helper: 'original',
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function (event, ui) {
//get task-type and task id.
console.log($(this).closest('.task-header').html());
var tasktype = $(this).closest('.task-type').html();
var taskid = $(this).closest('.task-no').html();
dropElement = $(this).closest('.ui-droppable').attr('id');
// console.log($(this).closest('.ui-droppable').attr('id'));
//save the status and the order of the item.
if (dropElement == "backlog")
{
// save the status of the item
}
else if (dropElement == "pending")
{
// save the status of the
}
else if (dropElement == "inProgress")
{
}
else if (dropElement == "completed")
{
}
}
}).disableSelection().droppable({
over: ".ui-droppable",
activeClass: 'highlight',
drop: function (event, ui) {
$(this).addClass("ui-state-highlight");
}
});
http://jsfiddle.net/h5rt2qgw/7/
var tasktype = $(this).find('.task-type').html();
var taskid = $(this).find('.task-no').html();
dropElement = $(this).attr('id');
当拖放项目以将更改写入数据库时,我需要从拖放项目内的 div 获取 html。
我似乎无法通过使用 closest('task-type').html() 成功获得 html,我不确定为什么。
我正在尝试使用接收事件。这是我目前所拥有的jsfiddle,任何帮助都会很棒。
这是代码
var $container = $(".task-container");
var $task = $('.todo-task');
$task.draggable({
addClasses: false,
connectToSortable: ".task-container",
});
$container.droppable({
accept: ".todo-task"
});
$(".ui-droppable").sortable({
placeholder: "ui-state-highlight",
opacity: .5,
helper: 'original',
beforeStop: function (event, ui) {
newItem = ui.item;
},
receive: function (event, ui) {
//get task-type and task id.
console.log($(this).closest('.task-header').html());
var tasktype = $(this).closest('.task-type').html();
var taskid = $(this).closest('.task-no').html();
dropElement = $(this).closest('.ui-droppable').attr('id');
// console.log($(this).closest('.ui-droppable').attr('id'));
//save the status and the order of the item.
if (dropElement == "backlog")
{
// save the status of the item
}
else if (dropElement == "pending")
{
// save the status of the
}
else if (dropElement == "inProgress")
{
}
else if (dropElement == "completed")
{
}
}
}).disableSelection().droppable({
over: ".ui-droppable",
activeClass: 'highlight',
drop: function (event, ui) {
$(this).addClass("ui-state-highlight");
}
});
http://jsfiddle.net/h5rt2qgw/7/
var tasktype = $(this).find('.task-type').html();
var taskid = $(this).find('.task-no').html();
dropElement = $(this).attr('id');