Scriptaculous Drag
Rendre une div draggable et mémoriser sa position sur le serveur à la fin de chaque drag. Placer la div correctement au chargement de la page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple - Drag & Drop</title>
<style type='text/css'>
#box {
width: 100px; height: 100px;
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<p>Hello</p>
<div id='box'>Drag me !</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exemple - Drag & Drop</title>
<style type='text/css'>
#box {
width: 100px; height: 100px;
position: absolute;
background-color: yellow;
}
</style>
</head>
<body>
<p>Hello</p>
<div id='box'>Drag me !</div>
</body>
</html>
Solution
Afficher
Code HTML pour lier les scripts
<script type='text/javascript' src='../lib/prototype.js'></script>
<script type='text/javascript' src='../src/scriptaculous.js?load=effects,dragdrop'></script>
<script type='text/javascript' src='../src/scriptaculous.js?load=effects,dragdrop'></script>
Code javascript à placer juste avant la fermeture du body
var context = {
left: 0,
top: 0
}
function saveContext() {
p = new Hash();
p['cmd'] = 'set';
p['key'] = 'ex-dragdrop';
p['value'] = $H(context).toJSON();
new Ajax.Request('../serveur.php', { parameters: p });
}
function test(draggable, event) {
var p = Position.page(draggable.element);
context.left = p[0];
context.top = p[1];
saveContext();
}
function initPosition(transport) {
context = transport.responseText.evalJSON();
$('box').style.left = context.left + "px";
$('box').style.top = context.top + "px";
new Draggable('box', { onEnd: test });
$('box').style.visibility = 'visible';
}
Event.observe(window, 'load', function() {
new Ajax.Request(
'../serveur.php?cmd=get&key=ex-dragdrop',
{ onSuccess: initPosition }
);
});
left: 0,
top: 0
}
function saveContext() {
p = new Hash();
p['cmd'] = 'set';
p['key'] = 'ex-dragdrop';
p['value'] = $H(context).toJSON();
new Ajax.Request('../serveur.php', { parameters: p });
}
function test(draggable, event) {
var p = Position.page(draggable.element);
context.left = p[0];
context.top = p[1];
saveContext();
}
function initPosition(transport) {
context = transport.responseText.evalJSON();
$('box').style.left = context.left + "px";
$('box').style.top = context.top + "px";
new Draggable('box', { onEnd: test });
$('box').style.visibility = 'visible';
}
Event.observe(window, 'load', function() {
new Ajax.Request(
'../serveur.php?cmd=get&key=ex-dragdrop',
{ onSuccess: initPosition }
);
});