: javascript

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 &amp; 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>

Voir l'exemple

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>

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 }
  );
});
 
Editer