2010-05-04 64 views
0

我正在使用jQuery Sortable插件將圖像從一個框拖放到另一個框。這適用於ff,chrome和safari,但在IE8中失敗。看起來,當你開始拖動圖像發送到後面。我試圖通過將z-index選項添加到可排序插件來解決這個問題,我嘗試將它附加到層次結構(主體)中較高的節點上。似乎在頁面中的每個其他項目上設置z-index會解決這個問題,還沒有嘗試過,我不打算這樣做,因爲這會弄亂很多。z-index不能在IE8中使用可排序的jQuery插件

所以用戶可以從1個畫廊將圖像拖到明廊 截圖應該是如何工作的:http://img69.imageshack.us/i/draganddrop.jpg/

一些HTML代碼:

<!--SECOND ARROCRDION ITEM --> 
    <a class="flickr_accordeon_header" id="flickr_second_header" href="javascript:;">__MSG__SEARCH_FOR_PHOTOS__</a> 
    <div> 
     <p class ="flickr_text" > __MSG__SEARCH_FOR_PHOTOS__</p> 
     <form method="GET" action="javascript:;"> 
      <p> 
       <input type="text" value="__MSG__SEARCH__" id="flickr_key_input" class="flickr_changeColorNormal" /> 
       <button class="s3d-button flickr_search" id="flickr_seach_button"> 
        <span class="s3d-button-inner" >__MSG__SEARCH__</span> 
       </button> 
       <img src="/devwidgets/flickr/images/ajax-loader-gray.gif" alt="__MSG__LOADING_IMAGE__" id="flickr_loading_img" /> 
       <a href="javascript:;" id="flickr_refresh_key_button"><img src="/dev/_images/recent_activity_icon.png" alt="refresh" title='refresh' /></a> 
      </p> 
     </form> 

     <div id="flickr_input_error">__MSG__INPUT_ERROR__</div> 
     <div id="flickr_input_same_error">__MSG__INPUT_SAME_ERROR__</div> 
     **<div id="flickr_key_gallery" ><ul class="flickr_key_ul"><li></li></ul></div>** 
     <div id="flickr_key_pagging" ></div> 
    </div> 
</div> 

<!--SLIDING SIDEBAR --> 
<div id="flickr_sidebar" class="jcarousel-skin-tango"> 
    <div id="flickr_side_paging"></div> 
    **<ul> 
     <li><img src="/devwidgets/flickr/images/drop-image.png" alt="__MSG__DROP_HERE__" class="flick_drop_here"></li> 
    </ul>** 
</div> 

的圖像得到渲染到了UL,所以基本上它只是李肇星與圖像

JavaScript進行排序的UL:

horizontal: { 
      helper: "clone", // Instead of dragging the real image a copy will be dragged 
      connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected 
      cursor: 'pointer', //change the cursor when dragging 
      opacity: 0.50, //Change the opacity while dragging 
      appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped 
      containment: 'body', //Make sure the user can't drag the images outside the widget 
      revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position 
      zIndex: 9999 
     } 

我試過將拖動的圖像設置爲絕對值,而相對容器...不起作用

任何人都知道如何在IE8中解決這個問題?

回答

0

顯然它與z-index無關。這1行搞砸了一切:opacity: 0.50