Question

有人能否了解为什么以下最简单的测试在IE上与Chrome和FF相比有不同的行为？

具体来说，在IE上，红色＆＃34; Drop Here＆＃34;当黄色框落在上面时，框会移动。

（奇怪的是，当我要求IE模仿IE 7时，这个片段似乎按预期工作，但奇怪的行为出现在IE 8,9和10上）

有什么想法？获得一致行为的任何变通方法？

<!DOCTYPE html>
<html>
    <head>
        <style>
            .DropBox {
                float: left;
                width: 75%;
                line-height: 70px;
                text-align: center;
                background-color: yellow;
            }

            .TargetBox {
                margin-left: 80%;
                width: 20%;
                line-height: 70px;
                text-align: center;
                background-color: red;
            }
        </style>

        <script>
            $(function () {
                $(".DropBox").draggable({revert: "invalid" });
                $(".TargetBox").droppable({
                    drop: function (event, ui){
                        $(ui.helper).hide("highlight",2000);}
                });
            });
        </script>
    </head>

    <body>
        <div class="DropBox">Drop Me</div>
        <div class="TargetBox">Drop Here</div>
    </body>
</html>

Answer 1

我在IE11中在JsFiddle中执行了您的代码，并且正如预期的那样它无效。 Dropbox不可拖动。

我继续在JsFiddle做了一些改变。幸运的是，我能够在IE11和Firefox中使用它：

http://jsfiddle.net/8w47sc39/4/

$(function () {
    $(".DropBox").draggable({
        revert: false
    });
    $(".TargetBox").droppable({
        drop: function (event, ui) {
            $(ui.helper).hide("highlight", 2000);
        }
    });
});

以下是更改摘要：

我将draggable的revert属性更改为＆＃34; true＆＃34; - 只是它有一个明确的布尔值
在框架和扩展程序下拉菜单中，我选择了＃34; No Library（Pure JS）＆＃34;
在“外部资源”选项卡中，我添加了ffg：
- http://code.jquery.com/ui/1.11.2/jquery-ui.js
- http://code.jquery.com/jquery-1.10.2.js

这些资源基本上是JQuery站点中可拖动示例的引用：

http://jqueryui.com/draggable/#default

Internet Explorer上的Jquery UI可放置行为

1 个答案: