Hi Ben,

some trouble resolving your problem ...
but here it is:

change the line
     dragTableContent.innerHTML = newDIV +
dragTableContent.innerHTML;
by
     dragTableContent.insert({top:newDIV});

and it works !!

--
david

On 16 fév, 13:21, Ben <sta...@gmx.de> wrote:
> 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