jquery: verticalement développez div lorsque vous utilisez draggable contenu

Question

J'ai des paragraphes de texte brut avec des mots spécifiques hilited. les mots hilités sont censés être traînables. lorsque le glissement est démarré, je veux que la div qui hilite le mot (#hilite) étende les extensions supérieure et inférieure (verticalement seulement), dans un ordre z plus élevé, et permette de faire glisser le mot (#word) vers le haut et vers le bas cet espace (conteneur: parent). Les plans sont à un moment donné, il a chuté sur une droppable dans la région. À ce stade, mon problème est que j'étends #hilite avec padding ... ce qui augmente la taille de la div sans augmenter l'espace utilisable. L'utilisation de Resizable serait-elle meilleure? ou animer? J'ai vu un certain nombre de recommandations pour l'utilisation de Resizable, mais je pensais que c'était pour le redimensionnement de l'utilisateur non programmatique. Pour les droppables, je suppose qu'une fois l'espace créé, j'échangerai .css ('display', '[none | block]') pour les montrer dans le div #hilite et en faire des cibles valides.

http://jsfiddle.net/monsto/GCsnM/ pour ce que j'ai atm.

(oh btw, je déteste les gens sont venus avec jsFiddle. Il est tout simplement trop génie.)

Answer 1

Je ne sais pas exactement ce que vous voulez faire, mais si vous avez #word draggable avec un confinement de parent, qui est #hilite, rien ne bouge. et 'vertically' n'est pas un paramètre approprié pour draggable, utilisez plutôt 'x' ou 'y'.

Mise à jour jsFiddle: http://jsfiddle.net/GCsnM/9/

Answer 2

Votre conteneur est une durée, qui est par défaut un élément en ligne, il ne peut pas montrer properites bloc. Vous devez dire qu'il se comporte comme bloc

#hilite { display: inline-block; } 

Demo

Et les options que vous avez données vertically est faux, donner Y. ^{Read Here}