dragging image that's linked and using dom drag & drop script

[aliceaod]

1) Script Title: DOM Drag & Drop script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm

3) Describe problem:

I am modifying a game. I want to make it so that you can move buildings around on a map and put them where you want on the map. I got the cookie thing figured out to remember the positions by checking the forums (ty to ddadmin for the solution). the images being dragged are hyperlinked to their maintenance page (ie: to upgrade that particular building or items in it).

When you release the mouse after you finish dragging, it takes you to the page that it's linked to. I don't want that. I want to make it so that a person has to double click on the building to go to the page after dragging it around.

I tried for days now surfing the 'net and am completely stuck (I'm not a coding wizard, obviously).

I found this which partially works (am I on the right track?):


<script type="text/javascript">
var click1 = 0;

function oneclick() {
//alert('You clicked on this once');
return false;//I commented out the first line and then added this
}

function twoclick() {
//alert('You clicked on this twice');
document.location.href="<?php echo"barn.php?town=".$town[0].""; ?>; //I commented out the first line and then added this
}

function one_click() {
click1 = setTimeout("oneclick()",300); // Make this value higher to allow slower double clicks
return false;
}

function two_click() {
if (click1 != 0) {
clearTimeout(click1);
click1 = 0;
}
twoclick();
setTimeout("if (click1 != 0) clearTimeout(click1)",1); // Netscape signals a click after a double click
}</script>



This works, but for only one of the buildings. What I can't figure out is how to get it to work with multiple linked images (there are 21 of them) or am I going about this the wrong way? How do I make it so that the dragged linked image doesn't go to the page it's linked to when the mouse button is released AND use this for multiple images?

[aliceaod]

Well, nevermind. It's just too much. I decided to go with the "handle" method. A bale of hay as the handle for a barn, for example, makes for a good one as it looks like part of the scenery.

[aliceaod]

I have an interesting problem!

I'm using WAMP to test all this out and on my local machine everything works a treat...but when I upload and go live, not all the buildings can be dragged! :eek: Again, works perfectly on my local machine...so I don't "get it".

I am using the "save to cookie" found here for 21 draggable buildings in my virtual world: http://www.dynamicdrive.com/forums/showthread.php?t=24330&highlight=drag+drop+save

Why would everything work great on my local machine with WAMP but not live on the internet??

The way I'm using the cookie code from the sited thread is like this (not sure if this has anything to do with it so thought I'd post it--I am showing 3 buildings only as an example, there are actually 21 in total):


<script type="text/javascript">

/////building1

var building1=document.getElementById("building1")
Drag.init(building1)
building1.onDragEnd=function(x, y){
setCookie("building1", x+"||"+y, 30)
}

if (getCookie("building1")!=""){
var building1cookie=getCookie("building1").split("||")
document.getElementById("building1").style.left=parseInt(building1cookie[0])+"px"
document.getElementById("building1").style.top=parseInt(building1cookie[1])+"px"
}

/////building2

var building2=document.getElementById("building2")
Drag.init(building2)
building2.onDragEnd=function(x, y){
setCookie("building2", x+"||"+y, 30)
}

if (getCookie("building2")!=""){
var building2cookie=getCookie("building2").split("||")
document.getElementById("building2").style.left=parseInt(building2cookie[0])+"px"
document.getElementById("building2").style.top=parseInt(building2cookie[1])+"px"
}

/////building3

var building3=document.getElementById("building3")
Drag.init(building3)
building3.onDragEnd=function(x, y){
setCookie("building3", x+"||"+y, 30)
}

if (getCookie("building3")!=""){
var building3cookie=getCookie("building3").split("||")
document.getElementById("building3").style.left=parseInt(building3cookie[0])+"px"
document.getElementById("building3").style.top=parseInt(building3cookie[1])+"px"
}

///////Cookie Creation for the buildings

function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value--this can be saved to database?
return ""
}

function setCookie(name, value, days){
var expireDate = new Date() //set "expstring" to either an explicit date (past or future)
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/"
}

</script>

Now, the way I am incorporating this is that I put all this cookie stuff in a file called "town_js.php" and in my town.php, I made an include at the bottom, after all the building code like this:
<?php include'town_js.php'; ?>

In my header file I have the <script type="text/javascript" src="dom-drag.js"></script> and <body onLoad=" Drag.init();">

[aliceaod]

ooooooo I *think* I know what the problem is, but need someone to confirm this for me...I think it's a "cookies" issue? I was reading that you can only have 20 cookies per domain or something? That there's a way to put the cookies into an array so that it seems like one cookie but I have no clue how to do that.

An alternative is to save this information to a user's account via mySQL database (which is actually what I'd really like to have happen) and have this page know how to use it (retrieves it when they visit). Argh. If someone can point me into a tut for total n00bs about how to do this, I'd appreciate it. I've been surfing for it but all this stuff just confuses the heck out of me.