jquery ui draggable elements not 'draggable' outside of scrolling div
- by Stu
hello all,
i am super stumped.
i have many elements (floating href tags) in a div with a set height/width, with scroll set to "overflow: auto" in the css.
this is the structure of the 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>
the parent div's, 'tf_div_tagsReturn' and 'tf_div_tagsDrop' will ultimately float next to each other.
here is the jquery which is run after all of the 'draggable' elements have been created with class name '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();
}
});
});
as i stated above, the draggable elements are draggable within div 'tf_div_tagsReturn', but they do not visually drag outside of that parent div. worthy to note, if i am dragging one of the draggable elements, and move the mouse over the droppable div, with id 'tf_dropBox', then the hoverclass is fired, i just can't see the draggable element any more.
thank you very much for any advice on helping me find a solution. this is my first run at using jquery, so hopefully i am just missing something super obvious. i've been reading the documentation and searching forums thus far to no prevail :(
thank you for your time.
UPDATE:
many thanks to Jabes88 for providing the solution which allowed me to achieve the functionality i was looking for, here is what my jquery ended up looking like, feel free to critique it, as i am new to 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();
}
});
});
