我面临着一个特殊的问题,即组合draggable和sortable。问题与占位符没有显示何时可拖动移动到可排序并且丢弃未被“识别”。当可排序的ul没有在css中定义的高度时会发生此行为。
当我在#ssortablePhotoList的css中定义固定高度时,会显示占位符,一切都按预期工作。
重要的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的高度来为这个问题创建一个解决方法,但我宁愿不去那么远。
问题是,当没有为容器指定高度时,不显示占位符的问题可能是什么。
Ragards, avsomeren
答案 0 :(得分:1)
将css的高度更改为
min-height: 102px;
然后它将默认为那个,当添加项目时,它将扩展为适合。