Scriptaculous - Drag & Drop
Scriptaculous - Drag & Drop - HTML/CSS - Programmation
Marsh Posté le 07-09-2006 à 10:10:57
tu fais un getElementByTagName('div') sur le 2eme et tu récupères les id correspondants.
Sujets relatifs:
- [Résolu] Connaitre le bouton appuyé lors d'un drag&drop?
- Drag and drop avec actualisation
- Drag & Drop, redimenssionnement, enfin tout le bordel de la souris...
- WebBrowser Drag & Drop
- Quel interface pour un drag and drop multiple ?
- drag and drop
Marsh Posté le 06-09-2006 à 21:47:34
Bonjour,
Voici mon problème. je cherche à pouvoir glisser / déposer des images d'un <div> à un autre, et pour cela, j'utilise scriptaculous. Le déplacement se passe parfaitement, mais par contre, je n'arrive pas récupérer l'id des images qui se trouvent dans mon deuxieme <div> (la dropzone).
Voici le code :
<form name="compose_galerie">
<div id="dragzone" style="width:320px;height:250px; border:1px dotted #888;">
<img src="http://demo.script.aculo.us/images/products/product2.png" id="selection01.jpg" />
<img src="http://demo.script.aculo.us/images/products/product2.png" id="selection02.jpg" />
<img src="http://demo.script.aculo.us/images/products/product2.png" id="selection03.jpg" />
<img src="http://demo.script.aculo.us/images/products/product2.png" id="selection04.jpg" />
<img src="http://demo.script.aculo.us/images/products/product2.png" id="selection05.jpg" />
<img src="http://demo.script.aculo.us/images/products/product2.png" id="selection06.jpg" />
</div>
<div id="dropzone" style="width:320px;height:250px; border:1px dotted #888;">
<input type="text" name="galerie" size="200" value=" " />
</form>
<script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
new Draggable('selection01.jpg', {revert:true});
new Draggable('selection02.jpg', {revert:true});
new Draggable('selection03.jpg', {revert:true});
new Draggable('selection04.jpg', {revert:true});
new Draggable('selection05.jpg', {revert:true});
new Draggable('selection06.jpg', {revert:true});
new Draggable('selection07.jpg', {revert:true});
Sortable.create('dragzone',{containment:['dragzone','dropzone'], dropOnEmpty:true});
Sortable.create('dropzone',{containment:['dragzone','dropzone'], dropOnEmpty:true});
Droppables.add('dropzone',{ hoverclass:'light' });
// ]]>
</script>
Si quelqu'un a déjà été dans ce cas précis...
Merci à tous !
Message édité par neke le 06-09-2006 à 21:51:30