DJ Engineer
2006-Nov-16 14:17 UTC
Draggable/Droppable revert positioning and/or relative positioning problems.
Hello everyone. I am still having problems with my code. I just
submitted a bug, but perhaps someone here could try and help me out as
well. When I drag and item to a drop location (I have manually
positioned these drop locations using javascript), the drop locations
will move to their original page positions. The divs are all relative.
Here''s the code, I have 2 files, the page code and the stylesheet
code. You will have to have the scriptaculous, prototype, dragdrop,
effects, and control javascript code already.
Here is the page code:
[code]
<code>
<pre>
{{{
<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>
}}}
</pre>
</code>
[/code]
Here is the stylesheet code:
[code]
<code>
<pre>
{{{
.hasData{
background:#0000FF;
color:#FFFFFF;
width:50px;
height:50px;
}
.drop{
position:relative;
background-color:#FF0000;
color:#FFFFFF;
width:50px;
height:50px;
}
.drag{
position:relative;
top:0px;
left:0px;
background-color:#000000;
color:#FFFFFF;
width:50px;
height:50px;
}
#box{
position:absolute;
background-color:#565656;
color:#000000;
width:170px;
height:300px;
overflow:hidden;
z-index:-1;
}
.over{
background-color:#FFFFFF;
color:#000000;
border:1px solid #000000;
overflow:hidden;
}
.blank{
background-color:#FFFFFF;
color:#FFFFFF;
border:0px;
}
}}}
</pre>
</code>
[/code]
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
DJ Engineer
2006-Nov-16 18:14 UTC
Re: Draggable/Droppable revert positioning and/or relative positioning problems.
Here''s a link to the a demo page. http://rubyonrails-spinoffs.googlegroups.com/web/test.htm?gda=W3uoSz4AAABjCujD-N5kwQJ5nOKsudZZQGKHOe05HC1ea-xYV7X9ChVJVT3hrgKrn_IySc8la3ImwalfbFNGWiV7zhB8JdfX&hl=en --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---