jqueryUI: Faites glisser l'élément de la boîte de dialogue et déposez-le sur la page principale?

Question

J'essaie de créer un système de glisser-déposer composé d'un espace de travail et d'une "palette". L'espace de travail se compose actuellement d'éléments de liste réorganisables et je souhaite que la palette soit une fenêtre flottante à partir de laquelle je puisse faire glisser des éléments et les ajouter à une position spécifique dans l'espace de travail.

J'utilise actuellement le jQueryUI « sortable » plug-in pour l'espace de travail et la jQueryUI « dialogue » plug-in pour la palette.

Cependant, je ne peux pas faire glisser quelque chose de la boîte de dialogue et à la page principale. Lorsque j'essaie, l'élément qui est déplacé disparaît lorsqu'il traverse la limite de la boîte de dialogue (ce qui est logique). Que puis-je changer pour que les éléments restent visibles lorsque je les fais glisser hors de la palette et me permettent de les déposer dans l'espace de travail principal?

Ou bien, y a-t-il des plugins jquery qui offrent ce type de palette drag-n-drop comme caractéristique principale?

Answer 1

Si en faisant glisser des éléments de la palette les doublons, sans les enlever de la palette, alors la réponse est l'option appendTo du draggable plugin. Cela spécifie le conteneur à utiliser lors du glissement. Dans mon cas, j'ai créé une nouvelle div en dehors des limites de la boîte de dialogue et spécifié que le conteneur de glisser. Cela permet à l'élément d'être médicamenteux au-delà des limites de la fenêtre de dialogue.

À mouvement articles de la palette dans l'espace, j'ai utilisé les techniques de cette similar SO question.