jquery - 使用 jquery UI 时如何获取可拖动表格行的 id？

Question

我需要id从“可拖动”的表格行中获取。除“ID_1”外，一切正常。我似乎无法得到这个值。我究竟做错了什么？

HTML：

<table>
    <tr class="droppable" id="value_2">
        <td>Stuff</td>
    </tr>
    ....
</table>

<table>
    <tr class="draggable" id="value_1">
        <td>Stuff</td>
    </tr>
    ....
</table>

查询：

$(document).ready(function() {
var ID_1
$(".draggable").draggable({cursor: 'move', 
    helper: function(event) {
        return $('<div class="drag_row"><table></table></div>')
        .find('table').append($(event.target).closest('tr').clone()).end();
    },
    appendTo: 'body'
});
$(".droppable").droppable({
    over: function(event, ui)
        {
            ID_1 = $(this).find("tr").attr('id');
        },
    drop: function(event, ui) { 
        var ID_2 = $(this).attr('id');

        $.ajax({
        type: "POST",
        url: 'www.mydomain.com/'+ID_1+'/'+ID_2,
        dataType: 'html',
        success: function(){
        }
    });
    return false;
    }
});
});

Answer 1

用于ui.draggable获取拖动的元素，所以代码应该是：

$(".droppable").droppable({
     over: function(event, ui) {
        ID_1 = ui.draggable.attr('id');
     },
    drop: function(event, ui) { 
       var ID_2 = ui.draggable.attr('id');
       // existing stuff
    }
});

Answer 2

您可以改用 event.target.id

这是一个小提琴（来自旧项目），显示 console.log 以查看有关过度容器的日志：http: //jsfiddle.net/Bouillou/QvRjL/97/

$(".droppable").droppable({
     over: function(event, ui) {
        ID_1 = event.target.id;
     },
    drop: function(event, ui) { 
       var ID_2 = event.target.id;
       // existing stuff
    }
});