z-index 在 IE8 中无法使用可排序的 jQuery 插件答案

【问题标题】：z-index not working in IE8 with the sortable jQuery pluginz-index 在 IE8 中无法使用可排序的 jQuery 插件
【发布时间】：2010-05-04 16:51:34
【问题描述】：

我正在使用 jQuery Sortable 插件将图像从一个盒子拖放到另一个盒子。这在 ff、chrome 和 safari 中运行良好，但在 IE8 中失败。似乎当您开始拖动时，图像被发送到后面。我尝试通过将 z-index 选项添加到可排序插件来解决此问题，我尝试将其附加到层次结构中更高的节点（主体）。似乎在页面中的每个其他项目上设置一个 z-index 可以解决这个问题，还没有尝试过，我不打算这样做，因为这会搞砸很多。

因此用户可以将图像从 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 中，所以基本上它只是一个带有 li 的带有图像的 ul

用于可排序的javascript：

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 中解决这个问题吗？

【问题讨论】：

标签： jquery internet-explorer-8 jquery-ui-sortable z-index

【解决方案1】：

显然它与 z-index 无关。这 1 行搞砸了一切：opacity: 0.50

【讨论】：