Discussion :

[Vinyl]

Bonjour,

J’ai déjà utilisé jquery ui droppable.

Sur un projet, j’essaye de l’utiliser et j’ai un problème avec mes css. Je ne sais pas si c’est possible ce que je veux faire.

J’ai une liste d’éléments qui est contenu dans un div qui est en overflow :hidden.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="liste">
    <p id="draggable_1">Element 1</p>
    <p id="draggable_2">Element 2</p>
    <p id="draggable_3">Element 3</p>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#liste
{
    overflow:hidden;
}

Donc, logiquement, quand j’essaye de faire un dragg d’un des éléments de la liste vers une autre div, le dragg fonctionne mais l’élément n’est plus visible lorsque je le sors de ma liste. C’est normal.

Je me demande si il y a possibilité de contourner ce problème.

A priori, c’est impossible, comme la div parente est en overflow :hidden.

Est ce que vous pouvez me le confirmez ? Il y a peut-être une solution ?

[Vinyl]

J'ai fait un petit fiddle pour montrer le problème :

http://jsfiddle.net/Vinyl/rrn6L/1/

[Vinyl]

ok, j'ai la solution.

Il faut cloner l'élément au moment ou le drag commence et l'ajouter au body avec l'option appendTo :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
helper: 'clone',
appendTo: 'body',