JQuery Draggable and Sortable placeholder

Hi everyone,

I am facing a particular issue with combining draggable and sortable. The problem has to do with a placeholder not showing when a draggable is moved over the sortable and the drop is not "recognized". This behaviour occurs when the sortable ul hs NO height defined in css.

When i do define a fixed height in css for the #SortablePhotoList, the placeholder is shown and everything works as expected.

The important css :

#SortablePhotoList { list-style-type: none; margin: 2px; padding: 0px; width: 858px; }
.Thumbnail { cursor: hand; width: 136px; height: 102px; float: left; margin: 0 5px 5px 0; position: relative; border: 1px #717171 solid; }
.ThumbnailPlaceholder { width: 136px; height: 102px; float: left; margin: 0 5px 5px 0; border: 1px #000 dotted; }

The important javascript :

  $("#SortablePhotoList").sortable({
        revert: true,
        placeholder: 'ThumbnailPlaceholder',
        tolerance: 'pointer',
        revert: 50,
        distance: 5,
        items: 'li:not(.Upload)',
        stop: function (event, ui) {
            //Do stuff with the sorted thumbnail
        },
        receive: function (event, ui) {
            //Accept the dragged item and change it's appearance a bit
            var item = $('#SortablePhotoList li.NewlyAdded');
            $(".ImageRemove", item).show();
            $(".PhotoSelector", item).show();
            item.removeClass('NewlyAdded');
        }
    });

I could ofcourse play around with programmatically adjusting the height of the #SortablePhotoList to create a workaround for this issue, but i'd rather not go that far.

The question is, what could be the issue of not displaying the placeholder when no height is specified for the container.

Ragards, avsomeren

ansaurus

tags:

views:

answers:

JQuery Draggable and Sortable placeholder

related questions