2010-10-20 100 views
0

我面臨着一個特殊的問題,結合可拖動和排序。問題與佔位符沒有顯示何時可拖動在可排序內容上移動並且拖放未被「識別」相關。當可排序的ul hs在css中定義的高度不會發生這種行爲。JQuery Draggable和可排序的佔位符

當我在#SortablePhotoList的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'); 
     } 
    }); 

我可以ofcourse玩的編程調整#SortablePhotoList的高度,創造了這個問題的解決方法,但我寧可不去那麼遠。

問題是,當沒有爲容器指定高度時,可能會出現不顯示佔位符的問題。

Ragards, avsomeren

回答

1

變化的CSS你的身高來

min-height: 102px; 

然後它會默認使用和添加項目時,它會擴大以適應。