从可掉落的物品中找到 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');