Hey, does anyone know how i can make it so i can drag an object then i can press save and it will save the x and y cordinates to mysql?
Printable View
Hey, does anyone know how i can make it so i can drag an object then i can press save and it will save the x and y cordinates to mysql?
Post an example of the JavaScript app. you're using.
I don't want to make a new thread on this.
Im using Scriptaculous (think thats how you spell it)
I can't make it drag, I can do sortables, etc. But how can I limit the drag in a specific table/div.
Also how can I export the x,y of the div?
this is what i have so far
PHP Code:<style>
<!--
.dragme{position:relative;}
-->
</style>
<script language="JavaScript1.2">
<!--
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var x,y;
var dobj;
function movemouse(e)
{
if (isdrag)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
isdrag = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");
//-->
</script>
<?
ob_start(); //Allows Cookies
include("config.php"); //Connects to Database
?>
<?
if($logged[username]){
$sql="SELECT * FROM uses_furni WHERE username = '$logged[username]' ORDER BY `id`";
$result=mysql_query($sql); //Selects the items from the database
while($rows=mysql_fetch_array($result)){ //Puts the info in an array
echo("<div style=\"position: absolute; width: 28px; height: 30px; z-index: 1; left:$rows[ypos] px; top:$rows[xpos] px;\" id=\"$rows[id]\">
<p><img src=\"$rows[itemimage]\" class=\"dragme\"></div>");
$query = mysql_query("Update `uses_furni` Set `xpos` = '$x', `ypos` = '$y' Where `id` = '$image'") or die(mysql_error());
}
}
?>
id like to make it so theres a save button and it saves the x and y cordinates to that item.
That code was on TT.
Your point?Quote:
Originally Posted by PixelWill
And I'll leave this in the hands of nets, he's a coding legend. ;)
I've got it:
http://www.dynamicdrive.com/dynamicindex4/image3.htm
Its the script were u drag Images Or DIV Boxs :)! Enjoy!
No point "Scott" :rolleyes:
Better than saying something newby like "point" I suppose.
phpme, that is just drag and drop and not saved so you can't come back to it how you left it. I would like this aswell, one of the best scripts people could have.
Does it have to be saved permanently, or could it be saved in a cookie (positions would be lost once the user clears their cookies)? It would be easier and more efficient to use cookies, if that's a viable option.
I need a code like this for my Habbo Home script.
I need it so you can drag the DIV layer around and then either click a button to save the co-ords or it just saves them when the layer is moved. I guess it could be done using cookies aslong as it is done effitiently.
Create a link, run a function.
use the function to getbyid the dragable layer, and save its x y co ords somewhere, on load, set them by when its generated as the top and left css paramiters.
Easy as pie. although the script works from position relative, not absoulte positioning, so you should choose one and stick with it.
Cookie would be great just warn the user it will go back to it's normal state once cleared their cookies. :)Quote:
Originally Posted by nets
I've written a script allowing clients to drag elements. However, once dragged the element's position is saved within a cookie. Upon page load, the element (identified by its ID) is moved into the position given by the cookie. I could easily implement a httpRequest object allowing for the positions to be saved on your server (if desired).
Typical usage:Code:<script>
window.onload = function () {
var cookies = document.cookie.split('; ');
for(var i=0; i<cookies.length; i++) {
var cookie = cookies[i];
if(cookie.match(/^position/)) {
exp = cookie.substr(8).split('=');
positions = exp[1].split('|');
document.getElementById(exp[0]).style.top = positions[0];
document.getElementById(exp[0]).style.left = positions[1];
}
}
}
document.onmouseup = function(e) {
e = e?e:window.event;
t = e.target?e.target:e.srcElement;
document.onmousemove = '';
if(t.className == 'drag') {
var date = new Date();
date.setTime(date.getTime()+1209600000);
document.cookie = "position"+t.id+"="+t.style.top+"|"+t.style.left+"; expires="+date.toGMTString()+"; path=/";
}
}
document.onmousedown = function(e) {
e = e?e:window.event;
t = e.target?e.target:e.srcElement;
if(t.className == 'drag') {
xy= e.clientY - parseInt(t.style.top);
xx= e.clientX - parseInt(t.style.left);
document.onmousemove = function uc(e) {
e = e ? e : window.event;
t.style.top = e.clientY - xy;
t.style.left = e.clientX - xx;
return false;
}
return false;
}
}
</script>
HTML Code:<img style="left: 150px; top: 150px; position: absolute;" src='example.jpg' id='example' class='drag'>
<img style="left: 150px; top: 150px; position: absolute;" src='example2.jpg' id='example2' class='drag'>
Would there be a way to make it so it is viewable to everyone else and not just the user? :)Quote:
Originally Posted by nets
Do you mean, so other people can view it but not edit it?
Yes. Would it be hard? :SQuote:
Originally Posted by nets
No, but I'm assuming you would need to have some form of a user system.
so a new habbo home tbh?
I have a very simple one. :)Quote:
Originally Posted by nets
I have a whole admin system, nets, if you could help me i will pay you.
I just need it to save to a PHP file, and get from a PHP file and I can code all the PHP.
I just suck at JS
Caleb
Ooooo I wonder what this is for.
Why do I sense another Habbo Images scenario coming.. :rolleyes:
James, im not going into this with you again, Habbo Remix is not the first place to create a "Habbo" home feature. Don't say when someone else makes it its "ripping" when Remix just took Habbo's Habbo home page and just reworded it :\
The Habbo Imager thing, you supplied the URL to the imager by having a flaw in your code and it displayed it.
I took it, and made my own.
Who cares? Your not at remix now anyways.. or last I heard you "left" your usertitle says "gone" hmmm why are we still here...
i Do /___\
I was not saying you were ripping it, nor did I say it was a unique idea.. it just seems funny that once remix releases a feature you follow suit. ;)Quote:
Originally Posted by Dentafrice
No, I have had this feature in the back of my mind for ages, I was thinking about doing it with Scriptaculous (or however you spell it, too busy to look it up), So thats the same way around, it just seems funny when Habbo releases a feature, remix follows suit?
Notice we are named HabboRemix.. a Habbo Fansite.Quote:
Originally Posted by Dentafrice