1

I'm having an issue where droppable areas are not accepting draggable items on the first attempt. Subsequent attempts seem to work just fine.

Please see this code - http://jsfiddle.net/grimmus/Pp9Qf/

//binding droppable property to generated columns
$("#contents").delegate('li', 'mouseover', function () {
    $(this).droppable({
        activeClass: "ui-state-active",
        hoverClass: "ui-state-hover",
        accept: ".ui-draggable",
        drop: function (event, ui) {
            $("<span></span>").text(ui.draggable.text()).appendTo(this);
        }
    });
});

You create a panel by selecting a number from the dropdown in the right area and pressing add.

The boxes in the created panel are all droppable. Then, choose employee from the 'select a model' dropdown.

The droppable areas should display a dashed border when an acceptable drag item hovers over it. This doesnt seem to happen the first time i try. If i redrag the item again the hover class appears and the item is accepted.

Any ideas what might be going wrong ? Seems something isn't getting initialized properly

Tested in Chrome and Firefox.

Thanks

4

0 回答 0