我正在尝试拖放,以便在拖放发生时,我可以访问有关被拖放控件和被拖放控件的数据。但是这个函数中的警告:
function onDragEnd(e)
{
if (!e)
e = event;
var callee = e.target || e.srcElement;
alert(callee.innerHTML);
if (event.srcElement.tagName=='A')
{ var srcCell = callee.parentElement; }
else
{ var srcCell = callee; }
}
显示的是被拖动对象的信息,而不是被放置的控件。我怎样才能得到"掉落"的任何东西的引用?
拨弄:http://jsfiddle.net/4Dg63/3/
不要使用jquery
必须使用ondrop事件来获取目标的信息。Ondragend是一个事件,它说,嘿,那个元素被丢弃了。我不知道在哪儿。"ondrop说:"嘿,有东西落在我身上了。我该怎么办呢?"。
你在做的事情对我来说似乎很有趣,所以我重写了它(另外,我不能看你的编码风格,抱歉:D)。
点击此处:http://jsfiddle.net/TaaQH/2/
和这里的代码:
HTML:<table id="container">
<tr><td>Rich</td><td>2050</td></tr>
<tr><td>Some Guy</td><td>100</td></tr>
<tr><td>Poor</td><td>2</td></tr>
</table>
<div draggable="true">The drag won't work with me, because I'm div and not a tr...</div>
<table>
<tr draggable="true">
<td style="border: 1px solid black">I'm table cell, but still, it won't work with me, because I'm not in the same table as target</td>
</tr>
</table>
CSS: #container {
border-collapse: collapse;
}
#container td {
border: 1px solid black;
}
JavaScript: function addEvent(object, eventType, callback) {
if (object.addEventListener) {
object.addEventListener(eventType, callback, false);
} else {
object.attachEvent('on' + eventType, callback);
}
}
function isInTable(table, row) {
return [].indexOf.call(table.rows, row) > -1;
}
function getData(row) {
var cells = row.cells;
return {
'name': cells[0].innerHTML,
'money': parseInt(cells[1].innerHTML)
};
}
function getMoneyAmount(row) {
return getData(row).money;
}
function setMoneyAmount(row, newAmount) {
row.cells[1].innerHTML = newAmount;
}
function changeTokenAmount(row, amount) {
setMoneyAmount(row, getMoneyAmount(row) + amount);
}
function transferTokens(rowFrom, rowTo, amount) {
if (getMoneyAmount(rowFrom) >= amount) {
changeTokenAmount(rowFrom, -amount);
changeTokenAmount(rowTo, amount);
return true;
}
return false;
}
function prepareTable(table) {
var rows = table.rows,
rowCount = rows.length;
for (var i = 0; i < rowCount; i++) {
rows[i].draggable = 'true';
}
}
function handleRowDrop(e) {
if (!sourceRow || !isInTable(container, sourceRow)) {
return false;
}
e.preventDefault();
var targetRow = e.target.parentNode,
dataFrom = getData(sourceRow),
dataTo = getData(targetRow);
if (sourceRow === targetRow) {
return false;
}
if (transferTokens(sourceRow, targetRow, 1)) {
alert('1 token transferred from ' + dataFrom.name + ' to ' + dataTo.name)
} else {
alert(dataFrom.name + ' doesn't have enough tokens!');
}
sourceRow = false;
}
var container = document.getElementById('container'),
sourceRow = false;
prepareTable(container);
addEvent(container, 'drop', handleRowDrop);
addEvent(container, 'dragstart', function (e) {
sourceRow = e.target;
});
addEvent(container, 'dragover', function (e) {
e.preventDefault();
});