在 IE 中使用 jQuery UI 拖放时出现问题答案

【问题标题】：Having a problem with jQuery UI drag and drop in IE在 IE 中使用 jQuery UI 拖放时出现问题
【发布时间】：2011-03-23 13:44:27
【问题描述】：

我希望有人能指出我的问题可能是什么。我正在尝试为一个试图模仿购物车的小项目设置拖放效果。所以这就是我正在使用的：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

这是我在 index.html 页面上得到的内容，该页面将输出到数据库并检索艺术元素，其中还附有一些价格信息。

<script type="text/javascript">
/* <![CDATA[ */
$.ajax({
    type : "GET",
    url  : "getRow.php",
    dataType: 'html',
    success: function (data) {
        $("#products").html(data);
        $.event.trigger('init-draggable-products');
    },
    error: function (xhr) {
        $('#errorDisplay').html('Error: '+ xhr.status + '' + xhr.statusText);
    }
});
/* ]]> */

我遇到的问题是在 IE 中应该是可以拖放的对象的图像有时可以工作，有时不能。 IE有什么不喜欢的吗？

这是我的$.event.trigger('init-draggable-products'); 代码：

function initializeDraggableProductImage() {
$(".products img").draggable({

    containment: 'document',
    opacity: 0.6,
    revert: 'invalid',
    helper: 'clone',
    zIndex: 100
});

$("#cabinet").droppable({

        drop:
                function(e, ui)
                {
                    $(this).removeClass('cabinetDrop');
                    $(this).addClass('ui-state-highlight');
                    $("#cabinetReset").show(); 
                    var param = $(ui.draggable).attr('src');

                    if($.browser.msie && $.browser.version=='6.0')
                    {
                        param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);
                        param = param[1];
                    }

                    addlist(param);
                }

});
};

$(document).bind('init-draggable-products', initializeDraggableProductImage);

我已经升级到：

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js

当我这样做时，产品或图像没有通过。

【问题讨论】：

附带说明，IE9 中的draggable 需要 jQuery UI 1.8.6 或更高版本（或this patch）才能正常工作。
并且，我们需要查看您绑定到init-draggable-products 事件的代码（如果此问题出现在除IE9 之外的其他版本的IE 中）。

标签： jquery jquery-ui drag-and-drop jquery-events

【解决方案1】：

您应该尝试将此代码放入 document.ready 语句中。接下来，就像史蒂夫说的：IE9 需要 jQuery UI 1.8.6 或更高版本。

<script type="text/javascript">
$(function(){
 $.ajax({
    type : "GET",
    url  : "getRow.php",
    dataType: 'html',
    success: function (data) {
        $("#products").html(data);
        $.event.trigger('init-draggable-products');
    },
    error: function (xhr) {
        $('#errorDisplay').html('Error: '+ xhr.status + '' + xhr.statusText);
    }
 });
);
</script>

【讨论】：

是的，就是这样。我现在将使用 1.8.6。谢谢！

【解决方案2】：

如果其他人遇到拖动问题，您可能需要添加

 background-color: #fff;
 opacity: 0;

对于被拖动/单击的元素，这是 IE 处理拖动事件的方式的一个怪癖。

【讨论】：