在拖放后获取对控件的引用

Getting reference to control dropped on after dragdrop

本文关键字：控件 引用 获取 拖放      更新时间：2023-09-26

我正在尝试拖放，以便在拖放发生时，我可以访问有关被拖放控件和被拖放控件的数据。但是这个函数中的警告:

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();
});
相关文章：