JQuery 可拖动和可排序占位符答案

【问题标题】：JQuery Draggable and Sortable placeholderJQuery 可拖动和可排序占位符
【发布时间】：2010-10-20 09:28:38
【问题描述】：

我在结合可拖动和可排序时遇到了一个特殊问题。问题与当可拖动对象移到可排序对象上且放置未被“识别”时未显示占位符有关。当 css 中定义的可排序 ul hs NO 高度时，会出现此行为。

当我在 CSS 中为 #SortablePhotoList 定义一个固定高度时，占位符会显示出来，一切都按预期工作。

重要的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; }

重要的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');
        }
    });

我当然可以通过编程调整#SortablePhotoList 的高度来为这个问题创建一个解决方法，但我不想走那么远。

问题是，当没有为容器指定高度时，不显示占位符可能是什么问题。

拉加兹，阿维索伦

【问题讨论】：

标签： jquery css draggable jquery-ui-sortable

【解决方案1】：

将你在css中的高度更改为

min-height: 102px;

然后它将默认为那个，当添加项目时它会扩展以适应。

【讨论】：