Jquery Droppable Draggable在Chrome / Safari和IE 9中不起作用

Question

以下Jquery拖放不起作用：

Internet Explorer：9 Safari：5+ Chrome：19 +

在Chrome和Safari中，丢弃不起作用。 当我放下拖动时，它会恢复原样，但它会再次出现在光标上。我必须点击droppable才能注册。

在IE 9中，拖动不起作用。它不动。

我需要做的是在右边有一个清单。此库存将是一个滑块（为简单起见，我已将其删除）。从库存中拖动项目时，它会恢复原状，然后将该图像源放置到拖放的图像占位符上。

 $(document).ready(function() {
    $('.circles').draggable({//The drag does not fire in IE9
        revert: "invalid",
        helper: "clone"

    });

    $('.circleTargetContainer').droppable({
        accept: '.circles',
        activeClass: 'ui-state-active',
         drop: function( event, ui ) {

             alert("HIT");//the hit does not register in Chrome and IE
                var popImage = $(ui.draggable).find('img').attr("src");
                //set placeholder to popImage
                var childImage = $(this).find('img');
                $(childImage).attr('src', popImage);


            }
    });


});

Answer 1

在玩IE9时，最好检查一下兼容性问题，然后尝试不同的问题。

你会发现在IE9兼容性视图中，它可以正常工作，所以你需要的只是force IE to load this view而不是默认的。

关于Chrome 19，我没有问题，除非它不是这样做的假设

1. 我点击右侧的一个元素
2. 我将它拖到放置区
3. 我停止点击
4. 选择元素粘在放置区域

Screen cast can be find here显示了这一点。

Answer 2

我已经在Safari 5.1.7和Chrome 19上测试了您的演示，但效果很好。仅在IE中它根本不起作用。 Checking validity of the html returned 2 errors，只是尝试将alt元素添加到图像中，并检查它是否与它一起使用。没有这个错误，它应该像兼容模式（它工作的地方）一样工作。