📄 dragdrop8_test.html
字号:
<html><head><title>Drag & Drop</title><style type="text/css">td{ width: 10em; text-align: center;}table.mytable { list-style-type: none; padding: 4px 4px 0 4px; margin: 0px; font-size: 13px; font-family: Arial, sans-serif;}table.mytable tr { margin-bottom: 4px; padding: 2px 2px; border: 1px solid #c00; background-color: #eee;}div.draggable { cursor:move; padding:2px; background-color: #BBCCDD;}div.dropsite { padding:2px; background-color: #DDBB99;}div.hoverclass123{ border:1px solid red;}</style><script language="JavaScript" type="text/javascript" src="../../lib/prototype.js"></script><script language="JavaScript" type="text/javascript" src="../../src/scriptaculous.js"></script><script language="JavaScript" type="text/javascript">Position.includeScrollOffsets = true;window.onload = function(){ var t1 = document.getElementById("t1"); add_divs(t1, 'td', 'draggable'); var trs = t1.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { var divs = document.getElementsByClassName("draggable", trs[i]); var drag_text = divs[2].innerHTML; for (var j = 0; j < divs.length; ++j) { new Draggable(divs[j], {ghosting:true, revert:true}); } } var t2 = document.getElementById("t2"); add_divs(t2, 'td', 'dropsite'); var divs = document.getElementsByClassName("dropsite", t2); for (var j = 0; j < divs.length; ++j) { Droppables.add(divs[j], {accept:'draggable', hoverclass:'hoverclass123', onDrop:function(element, dropon, event) { debug("dropped " + element.innerHTML + " on " + dropon.innerHTML + "\n")}}); }};function debug(text){ document.getElementById('debug').innerHTML = "<pre>" + text + "</pre>";}function add_divs(table, tag, classname){ var items = table.getElementsByTagName(tag); for (var i = 0; i < items.length; i++) items[i].innerHTML = "<div class='" + classname + "'>" + items[i].innerHTML + "</div>";}</script></head><body><p>Drag from this table:</p><DIV STYLE="padding-left: 50pt;"><DIV STYLE="overflow: auto; width: 250; height: 100; border: 1px gray solid; padding:0px; margin: 0px;"><table id="t1" class="sortable mytable"> <tr><td>one</td><td>1</td><td>uno</td></tr> <tr><td>two</td><td>2</td><td>dos</td></tr> <tr><td>three</td><td>3</td><td>tres</td></tr> <tr><td>four</td><td>4</td><td>quatro</td></tr> <tr><td>five</td><td>5</td><td>cinco</td></tr> <tr><td>six</td><td>6</td><td>seis</td></tr> <tr><td>seven</td><td>7</td><td>siete</td></tr> <tr><td>eight</td><td>8</td><td>ocho</td></tr> <tr><td>nine</td><td>9</td><td>nueve</td></tr> <tr><td>ten</td><td>10</td><td>diez</td></tr></table></DIV></DIV><p><p>Drop on this table:</p><DIV STYLE="padding-left: 50pt;"><DIV STYLE="overflow: auto; width: 250; height: 100; border: 1px gray solid; padding:0px; margin: 0px;"><table id="t2" class="sortable mytable"> <tr><td>eleven</td><td>11</td><td>once</td></tr> <tr><td>twelve</td><td>12</td><td>doce</td></tr> <tr><td>thirteen</td><td>13</td><td>trece</td></tr> <tr><td>fourteen</td><td>14</td><td>catorce</td></tr> <tr><td>fifteen</td><td>15</td><td>quince</td></tr> <tr><td>sixteen</td><td>16</td><td>dieciseis</td></tr> <tr><td>seventeen</td><td>17</td><td>diecisiete</td></tr> <tr><td>eightteen</td><td>18</td><td>dieciocho</td></tr> <tr><td>nineteen</td><td>19</td><td>diecinueve</td></tr> <tr><td>twenty</td><td>20</td><td>veinte</td></tr></table></DIV></DIV><p><div id="debug"></div></p></body></html>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -