Image de fond Draggable avec jQueryUI

Par tekyo11, il y a 11 ans


Bonjour,
je cherche un moyen de rendre une image de fond draggable et une div par dessus avec son contenu (qui lui est fix).

Merci.

3 réponses

tekyo11, il y a 11 ans

J'oubliais peut être de préciser, mais la div qui se trouve par dessus n'est pas draggable, elle reste fixe.
J'ai tenté pas mal de chose, mais je ne trouve pas. Que se soit du coté du CSS ou je jQuery

tonymx227, il y a 11 ans

Dans mon exemple la div qui se trouve par dessus est "div.section-content" donc c'est bon normalement. Sinon tu gère toi même le DND en faisant une gestion du "mousedown", "mousemove" et "mouseup" sur l'image de fond... ;) Tu déplace l'image selon la position de la souris.

tonymx227, il y a 11 ans

Rien de plus simple avec HTML5 et son DrangAndDrop.

Lien (JS pure) : http://www.html5rocks.com/en/tutorials/dnd/basics/?redirect_from_locale=fr

Un exemple (jQuery) à compléter que je viens de faire :

HTML :

<div class="section isdraggable" draggable="true"> <!-- Image de fond pour div.section -->
<div class="section-content">Ton texte</div> <!-- div.section-content en position fixed -->
</div>

JS :

$('div.isdraggable').on('dragstart', function(){
}).on('drag', function(){
}).on('dragenter', function(){
}).on('dragleave', function(){
}).on('dragover', function(){
}).on('drop', function(){
}).on('dragend', function(){
});