Question

我正在尝试拖放，以便在发生删除时，我可以访问有关拖动的控件和被删除的控件的数据。但是这个功能的警告：

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。

Answer 1

您必须使用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();
});

在拖拽之后获得对控制的引用

1 个答案: