Nested draggables not dragging in Safari and Chrome
I have a nested list of the type below. It represents a folder
hierarchy and I am trying to make it so that if the user drags any
folder in the tree, all of the children will be dragged along with
it. It works perfectly in IE7 and FF3, any of the folders can be
dragged and dropped.
However, in Safari and Chrome, when dragging the inner draggables,
they don't appear to be being dragged. They can be dropped in a
droppable just fine, but they just don't follow the cursor when being
dragged. I am currently using JQuery 1.2.6 and UI 1.5.3. I using an
older release due to a regression bug in newer versions of UI
which doesn't allow nested draggables at all in IE. Has anyone had
this problem?
<ul>
<li class='draggers'>Folder1
<ul>
<li class='draggers'>Folder1.1
<ul>
<li class='draggers'>Folder1.1.1</li>
<li class='draggers'>Folder1.1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
My Javascript is below:
$(document).ready(function() {
$(".draggers").draggable({
revert: true,
opacity: 0.2
});
$(".dropZone").droppable({
accept: ".draggers",
drop: function (ev,ui) {
alert("dropped");
}
});
});