Question

我需要从“draggable”表格行中获取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>

Jquery的：

$(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
    }
});

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

2 个答案: