Ajax Layer JavaScript DHTML




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:



            border: 1px gray solid;
            padding:0px; margin: 0px;">

    one1uno
    two2dos
    three3tres
    four4quatro
    five5cinco
    six6seis
    seven7siete
    eight8ocho
    nine9nueve
    ten10diez




Drop on this table:



            border: 1px gray solid;
            padding:0px; margin: 0px;">

    eleven11once
    twelve12doce
    thirteen13trece
    fourteen14catorce
    fifteen15quince
    sixteen16dieciseis
    seventeen17diecisiete
    eightteen18dieciocho
    nineteen19diecinueve
    twenty20veinte








           
       
scriptaculous-js-1.6.4.zip( 139 k)