我做了这个jsfiddle为一个不同的答案,我想知道我怎么能得到源容器,可放的来自
http://jsfiddle.net/d7wsz/8/jquery
$("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#Table1, #Table2, #Table3").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
alert($(ui.draggable).text() +
' was draged from ' +
'XX' + ' to ' +
$(this).attr('id') + '.');
}
});
, HTML是
<h1>Table 1</h1>
<table id="Table1">
<tr><td>Row 3</td></tr>
<tr class='disabled'><td>Row 4</td></tr>
<tr><td>Row 5</td></tr>
</table>
<h2>Table 2</h2>
<table id="Table2">
<tr><td>Row 8</td></tr>
<tr class='disabled'><td>Row 9</td></tr>
<tr><td>Row 10</td></tr>
</table>
<h2>Table 3</h2>
<table id="Table3">
<tr><td>Row 11</td></tr>
<tr><td>Row 12</td></tr>
</table>
您可以使用在可拖拽对象的start
事件中设置的变量,并在可拖拽对象的stop
事件中获取该信息。
$(function () {
var sourceElement;
$("#Table1 tr:not(.disabled), #Table2 tr:not(.disabled), #Table3 tr:not(.disabled)").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
//NEW
sourceElement = $(this).closest('table').attr('id');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#Table1, #Table2, #Table3").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
//alert sourceElement
alert($(ui.draggable).text() +
' was draged from ' + sourceElement + ' to ' + $(this).attr('id') + '.');
}
});
});
见我更新的jsfiddle如果你的页面上有更多的表格,你可以考虑给它们一个类来正确地识别它们。