I create my draggables in a function addDraggable(). The issue is that
only one Draggable, namely the last one created, is ever usable. This
is freaking me out, since I don't see why this is the case. My guess
is that scriptaculous doesn't have the right coordinates for the
floating elements.

Btw, I really need this DIV container. I have an AJAX application/game
which runs fine under FF but has issues in IE (fault of prototype) and
dealing with table cells is a hassle.

What's going wrong?

Test Code:

<title>Drag &amp; Drop</title>

<style type="text/css">

 width: 10em;
 text-align: center;

table.mytable {

        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;
        text-align: center;

div.draggable {
  background-color: #BBCCDD;

div.dropsite {
  background-color: #DDBB99;

        border:1px solid red;

.divCell {
        display: inline-block;
        border: 1px solid #000;
        margin: 4 5px;
        text-align: center;


<!--[if lt IE 8]><style>
.iewibl {
        display: inline;
<!--[if lt IE 5.5000]><style>
.divCell {
        height: 0;

<script language="JavaScript" type="text/javascript" src="../../lib/
<script language="JavaScript" type="text/javascript" src="../../src/
<script language="JavaScript" type="text/javascript">

Position.includeScrollOffsets = true;

window.onload = function()
        var dragTable = document.getElementById("dragTableContent");
        //add_divs(t1, 'td', 'draggable');

        //var content = dragTable.getElementsByTagName("div");

        //var divs = document.getElementsByClassName("draggable", content
        //var drag_text = divs[2].innerHTML;
        for (var j = 0; j < 10; ++j)
                addDraggable(j, "name "+j, "dummy.gif", "associated text");

        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',
onDrop:function(element, dropon, event)
        dropon.droppableID = "TESTID" + j;
        dropon.divID = "divCell" + j;
        debug("dropped " + element.innerHTML + " on " +
dropon.innerHTML + dropon.droppableID + "\n");
        removeDroppable(dropon, element);

function addDraggable (id, name, image, text) {
        var dragTableContent = document.getElementById("dragTableContent");
        var divID = "dragDiv" + id;
        var newDIV = "<div class ='divCell iewibl'><div id='" + divID +"'
class='divCell draggable iewibl'>" + name + "<br /><img src='" + image
+"' /></div></div>"
        dragTableContent.innerHTML = newDIV + dragTableContent.innerHTML;
        var newDIVElement = $(divID);
        var draggable = null;
        draggable = new Draggable(newDIVElement, {ghosting:true,
        draggable.soziomatText = text;
        draggable.divID = divID;
        draggable.draggableID = id;

function removeDroppable(dropon, drag) {
        /*var divID = document.getElementById(dropon.divID);

function removeDraggable(drag) {
        var divID = document.getElementById(drag.divID);

function debug(text)
       = "<pre>" + text + "</pre>";

function add_divs(table, tag, classname)
{  //+ "<img src=' " + image + "'></img>" + text
        var items = table.getElementsByTagName(tag);
        for (var i = 0; i < items.length-1; i++)
                items[i].innerHTML =
                        "<div class='" + classname + "'>" + items[i].innerHTML 
+ "<img
src='dummy.gif' /></div>";


<p>Drag from this table:</p>
<DIV STYLE="padding-left: 50pt;">
        <div id="dragTable" style="display: table; width:720px; border:1px;
solid #FF0066;">
                <div id="dragTableContent" style="background-color: 
align: middle; text-align: center;">


<p>Drop on this table:</p>
<DIV STYLE="padding-left: 50pt;">
<table id="t2" class="sortable mytable">
    <tr align="center"><td>eightteen</td><td>18</td><td>dieciocho</

<div id="debug"></div>

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to