Question

“你好。我想在表格中创建拖放。我做了以下代码。

<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
 </script>
</head>
 <body>

<table border="1" width="200px">
<tr>
 <td id="td0" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</td>
<td id="Td1" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</td>

</tr>
 < tr>
 <td id="Td2" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</td>
 <td id="Td3" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</td>

</tr>
<tr>
<td id="Td4" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</td>
<td id="Td5" ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</td>

</tr>
</table>

<br>

<table border="1">
 <tr>
<td id="drag1" draggable="true" ondragstart="drag(event)">Hello</td>
<td id="drag2" draggable="true" ondragstart="drag(event)">Hello</td><td>Hello</td></tr>

<tr>
<td id="drag3" draggable="true" ondragstart="drag(event)">Hello</td>
<td id="drag4" draggable="true" ondragstart="drag(event)">Hello</td><td>Hello</td>
</tr>

</table>

</body>

有效。但是当我将它拖放到上面的表格中时，我以前的数据丢失了，单元格的大小也增加了。如何停止增加单元格的大小，我想在第二个表中保留我以前的数据。

请建议我.. 谢谢：“

Answer 1

我建议您使用jqueryui 这个链接可以帮到你。 http://jqueryui.com/draggable/

在HTML中拖放

1 个答案: