draggable and droppable not working on fixed size containers

Question

I am not able to make draggable and droppable working within fixed size containers. Here is the jsFiddle link . If I remove class tasks on divs then it works otherwise the draggable item visibility just hide when I tried to move it to the droppable div. Please point me in right direction. Thanks

Answer 1

The dragged element is limited in the bounds of its parent because of the overflow in the style.

You can handle this by using the helper: "clone" option of the draggable element.

Docs: http://api.jqueryui.com/draggable/#option-helper

Code:

$(function () {

    $(".draggable > li").draggable({
        revert: "invalid",
        cursor: "move",
        containment: "document",
        scroll: false,
        helper: "clone"
    });

    $(".droppable").droppable({
        accept: ".draggable > li",
        activeClass: "ui-state-highlight",
        drop: function (event, ui) {
            ui.draggable.detach().appendTo($(this));
        }
    });
});

In the drop function there is a function that detach the dragged element from the original list and attach it to the new one.

Demo: http://jsfiddle.net/IrvinDominin/Fx5TQ/