Drag & Drop
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;
}
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
= "" + text + "
";
}
function add_divs(table, tag, classname)
{
var items = table.getElementsByTagName(tag);
for (var i = 0; i < items.length; i++)
items[i].innerHTML =
"" + items[i].innerHTML + " Drag from this table:
Drop on this table: