je suis super perplexe.
j'ai de nombreux éléments (flottant href tags) dans un div avec une hauteur/largeur, avec défilement réglé sur "overflow: auto" dans le css.
c'est la structure de la divs:
<div id="tagFun_div_main">
<div id="tf_div_tagsReturn">
<!-- all the draggable elements go in here, the parent div scolls -->
</div>
<div id=" tf_div_tagsDrop">
<div id="tf_dropBox"></div>
</div></div>
le div parent s, 'tf_div_tagsReturn" et "tf_div_tagsDrop' sera finalement de laisser flotter à côté les uns des autres.
voici le jquery qui est exécuté après tous les "déplaçable" éléments ont été créé avec le nom de classe 'tag_cell', :
$(function() {
$(".tag_cell").draggable({
revert: 'invalid',
scroll: false,
containment: '#tagFun_div_main'
});
$("#tf_dropBox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
comme je l'ai dit ci-dessus, les éléments déplaçables sont déplaçable à l'intérieur de la div 'tf_div_tagsReturn", mais ils ne sont pas visuellement glisser en dehors de la div parent. digne de remarque, si je suis en faisant glisser l'un des éléments déplaçables, et déplacez la souris sur le drop div avec l'id 'tf_dropBox', puis le hoverclass est tiré, je ne peux pas voir l'élément déplaçable plus.
merci beaucoup pour tous les conseils sur de m'aider à trouver une solution. c'est mon premier run à l'aide de jquery, donc j'espère que je suis juste en manque de quelque chose de super évident. j'ai lu la documentation et de recherche des forums à ce jour pas de l'emporter :(
je vous remercie pour votre temps.
Mise à JOUR:
un grand merci à Jabes88 pour fournir la solution qui m'a permis de réaliser les fonctionnalités que je recherchais, voici ce que mon jquery fini par ressembler, n'hésitez pas à en faire la critique, comme je suis nouveau sur jquery.
$(function() {
$(".tag_cell").draggable({
revert: 'invalid',
scroll: false,
containment: '#tagFun_div_main',
helper: 'clone',
start : function() {
this.style.display="none";
},
stop: function() {
this.style.display="";
}
});
$(".tf_dropBox").droppable({
accept: '.tag_cell',
hoverClass: 'tf_dropBox_hover',
activeClass: 'tf_dropBox_active',
drop: function(event, ui) {
GLOBAL_ary_tf_tags.push(ui.draggable.html());
tagFun_reload();
}
});
});
Merci Jabes88, vous êtes mon sauveur! Fonctionne à merveille :)
