Question

I am using jquery layout for the layout of my application. http://layout.jquery-dev.net/demos/complex.html
I have a list of elements that can be dropped from the West Pane on to the Inner pane. Now when I am trying to drag any of the li s, the item is going to the back i.e the west pane scrolls to the right and the node does not come to the center pane. I was thinking that this might be a z-Index issue, but even though I did set the zIndex value to a max value(10000), it does not work. Is there any way I can make this work?

Code I have used to drag and drop is :

//nodetitle is a class associated with a span on the West Pane

     $(".nodetitle").draggable({
            helper: 'clone',
            zIndex: 2700,
            create: function () {
                var $self = $(self);
            },

            stop: function () {
                var $self = $(self);
            },
            drag: function (event, ui) {
                cursor: 'move';
                helper: 'clone';
            },

            revert: function (event, ui) {
                return !event;
            }

        });

//treedroppable is a div id in the Inner Pane

            $('#treedroppable').droppable({
            activeClass: 'ui-state-hover',
            hoverClass: 'ui-state-active',
            drop: function (event, ui) {

                if (ui.draggable.attr('class') == "nodetitle") {

                var droppedWidget = $($(".nodetitle").clone());
                document.write(droppedWidget);

                }

                return true;
            }


        });

Can anyone let me know where am I missing ?

Thanks.

Answer 1

Basically the following options need to be on the draggable control:

               helper: 'clone',
                revert: true,
                 appendTo: 'body',
                scroll: false,
                revertDuration: 0,
                zIndex:9999999

The key is scroll should be set to false and appendTo should be set to body.

simple enough but I had to dig a lot many places to get the final answer.

Anirban