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:

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

<style type="text/css">

td
{
 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 {
  cursor:move;
  padding:4px;
  background-color: #BBCCDD;
}

div.dropsite {
  padding:2px;
  background-color: #DDBB99;
}

div.hoverclass123
{
        border:1px solid red;
}

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

}

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

<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 dragTable = document.getElementById("dragTableContent");
        //add_divs(t1, 'td', 'draggable');

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

        //var divs = document.getElementsByClassName("draggable", content
[i]);
        //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',
                                                                         
hoverclass:'hoverclass123',
                                                                         
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,
revert:true});
        draggable.soziomatText = text;
        draggable.divID = divID;
        draggable.draggableID = id;
}

function removeDroppable(dropon, drag) {
        /*var divID = document.getElementById(dropon.divID);
        $(divID).remove();
        Droppables.remove(dropon);
        removeDraggable(drag);*/
}

function removeDraggable(drag) {
        var divID = document.getElementById(drag.divID);
        $(divID).remove();
        Draggables.remove(drag);
}

function debug(text)
{
   document.getElementById('debug').innerHTML
       = "<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>";
}


</script>
</head>
<body>

<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: 
#0f0;vertical-
align: middle; text-align: center;">

                </div>
        </div>
</DIV>
<p>


<p>Drop on this table:</p>
<DIV STYLE="padding-left: 50pt;">
</DIV>
<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 align="center"><td>eightteen</td><td>18</td><td>dieciocho</
td></tr>
    <tr><td>nineteen</td><td>19</td><td></td></tr>
</table>

<p>
<div id="debug"></div>
</p>
</body>
</html>

--~--~---------~--~----~------------~-------~--~----~
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 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to