JQuery UI Draggable Clone dans DIV divisible

Question

J'ai travaillé sur un projet qui m'oblige à utiliser la fonctionnalité glisser-déposer de l'interface utilisateur jQuery. Lors de l'introduction d'un div défilant dans le mélange, mon code ne fonctionne pas comme prévu, toute aide serait grandement appréciée.

Les objectifs:

• (complet) Permettre aux utilisateurs de glisser plusieurs instances d'un visage souriant ou triste de la ToolBar sur l'une des trois toiles dans la div scrollable. Cela a été fait en clonant l'assistant et en supprimant la classe orignal droppableShape. (Complet) Lorsqu'un visage de la barre d'outils a été supprimé, définissez le confinement de ce visage sur le canevas sur lequel il a été déposé.

• (complet) Lorsqu'un visage de la barre d'outils a été abandonnée, continuer à permettre à l'utilisateur de se déplacer librement autour de la toile, il est contenu.

• (Complete) Ajouter les trois toiles à un scrollable div pour plus de convivialité. C'est là mon problème est introduit

Le problème:

• Lorsque j'ajoute outil face à mon div scrollable, les rouleaux d'objet avec la div et ne pas « coller » à le canevas souhaité sur lequel l'utilisateur l'a déposé.

Ce que j'ai essayé et n'a pas aidé:

// Make shapes droppable 
$(".droppableShape").draggable({ 
    helper:'clone', 
    scrollable: false, 
    appendTo: '#canvases_area' 
}); 

Voici un violon qui montre quand un visage est tombé sur la div, il est statique alors que les toiles défilent. S'il vous plaît laissez-moi savoir si je peux fournir des informations supplémentaires et je vous remercie de regarder cela!

http://jsfiddle.net/fvec4y83/

Answer 1

Vous êtes faces element ont un style absolute position, ce qui signifie qu'ils dépendent du premier parent relative ou absolute. Dans votre cas, ce serait l'élément html. Mais puisque vous avez scroll sur votre canvases_area, lorsque ce parchemin, il n'affecte pas le html jusqu'à ce que le canvases_area atteigne le haut ou le bas.

Vous avez plusieurs façons de résoudre votre problème, vous pouvez supprimer le scroll sur canvas_area:

#canvases_area { 
    //overflow-y: scroll; 
    height:1120px; 
    float: right; 
} 

Ou définir sa position à absolute. Ensuite, vous devrez définir les coordonnées top et ajuster z-index de sorte que la face glissable soit au-dessus lors du glissement. Ensuite, il serait plus facile d'ajouter à canvases_area, sinon le calcul pour positionner l'élément est un peu difficile à faire.Vous pouvez le faire comme ceci:

#canvases_area { 
    overflow-y: scroll; 
    height:1120px; 
    float: right; 
    position: absolute; 
    top:80px; 
    z-index:-1; 
} 

et

var newTop = ui.offset.top-$(this).parent().offset().top+$(this).parent().scrollTop()+(ui.draggable.height()/2) 

$(this).parent().append(new_field); 
new_field.css({'top': newTop}) 

jsFiddle pour dernier: http://jsfiddle.net/hwrbLx8c/3/