Scriptaculous Version 1.6.4
WEB APPLICATION OVERVIEW
There is an initial draggable that I'll call the tree node. There is also 6 droppable locations for the draggable to be placed in. These droppable locations will be known as the cells of the table. Once the tree node is dragged and dropped into a table cell location, the table cell will update itselft with the text of the tree node item, become draggable, and still will remain droppable. The cells of the table accepts drops from the tree node and from the draggable cells. The tree node is also a droppable that accepts drops from the table. If you drop a cell item into the tree node, the cell item loses it's draggable, remains droppable, and loses its' text.
DIV/DRAGNDROP INFORMATION
The draggables has ghosting = true and revert = true. The droppables have a hoverclass, and I have created a hasData class that changes it's style once their is data inside the droppable (only for the table cells). The class is reset back to the original class after the data has left the droppable. The divs all have relative positions, and I then change their position manually through the code to develop a table structure from the divs.
THE PROBLEM
When I drop data into the cell the first time, the cell will move to its original relative position from before I rearranged the cells. Then when I click on the cell and move it a little bit, the cell reverts back to the position that I had initially changed it to.
THE CODE
<html><head>
<style type="text/css" media="screen">@import "images/test.css";</style>
<script src="images/prototype.js" language="javascript" type="text/javascript"></script>
<script src="images/scriptaculous.js" language="javascript" type="text/javascript"></script>
<script src="images/controls.js" language="javascript" type="text/javascript"></script>
<script src="images/effects.js" language="javascript" type="text/javascript"></script>
<script src="images/dragdrop.js" language="javascript" type="text/javascript"></script>
</head>
<body onload="setup()">
<div id="drag" class="drag">Hello</div>
<div id="box">
<div id="drop1" class="drop"></div><div id="drop2" class="drop"></div><div id="drop3" class="drop"></div>
<div id="drop4" class="drop"></div><div id="drop5" class="drop"></div><div id="drop6" class="drop"></div>
</div>
</body>
<script language="javascript" type="text/javascript">
var drag4Drop = new Array();
function setup(){
positionTable();
createDrag();
}
function createDrag(){
var dragElement = document.getElementById('drag');
var theEl = new Array();
for(var i = 0; i < 6; ++i)
theEl[i] = document.getElementById('drop' + (i+1));
var dragObj = new Draggable(dragElement.id,{revert:true,ghosting:true});
for(var i = 0; i < 6; ++i){
Droppables.add(theEl[i].id, {accept:['drag','hasData','drop'], hoverclass:'over', onDrop:
function(element1, element2){//element1 - drag; element2 - drop
if(element1.className == "drag"){
element2.innerText = element1.innerText;
for(var i = 0; i < 6; ++i)
if(element2.id==("drop" + (i+1)))
drag4Drop[i] = new Draggable(element2.id,{revert:true,ghosting:true});
hasDataChangeStyle(element2);
}
else if(element1.className == "hasData"){
if(element2.innerText==""){
for(var j = 0; j < 6; ++j){
if(element1.id == ("drop" + (j+1)))
drag4Drop[j].destroy();
if(element2.id == ("drop" + (j+1)))
drag4Drop[0] = new Draggable(element2.id,{revert:true,ghosting:true});
}
element2.innerText = element1.innerText;
element1.innerText = "";
hasNoDataChangeStyle(element1);
hasDataChangeStyle(element2);
}
else{
var temp = element1.innerText;
element1.innerText = element2.innerText;
element2.innerText = temp;
}
}
}});
}
Droppables.add(dragElement.id,{accept:['hasData'],onDrop:
function(element1, element2){
element1.innerText = "";
for(var i = 0; i < 6; ++i)
if(element1.id == ("drop" + (i+1)))
drag4Drop[i].destroy();
hasNoDataChangeStyle(element1);}});
}
function hasDataChangeStyle(element){element.className = "hasData";}
function hasNoDataChangeStyle(element){element.className = "drop";}
function positionTable(){
var element;
for(var i = 0; i < 6; ++i){
element = document.getElementById("drop" + (i+1));
if(i < 3)
element.style.top = 5 + 5*i - 55*i + "px";
else
element.style.top = 5 + 5*i - 55*i + 55 + "px";
element.style.left = (((i)%3))*55 + 5 + "px";
}
}
</script>
</html>
