Question

我目前正在尝试在我的项目上实现拖放功能。它似乎在Chrome，Firefox甚至IE11上运行良好，但不是IE9和IE10（需要支持）。

在拖动对象时移动鼠标时，这两个浏览器似乎不会更新e.clientX和e.clientY：它会保留原始点击坐标。这是我正在使用的代码：

$("html").on("dragover", function(event) {
    event.preventDefault();  
    event.stopPropagation();
});

$("html").on("dragenter", function(event) {
    event.preventDefault();  
    event.stopPropagation();
});

$("html").on("dragleave", function(event) {
    event.preventDefault();  
    event.stopPropagation();
});

$("html").on("drop", function(event) {
    event.preventDefault();  
    event.stopPropagation();
    
    updateXY(event);
});

function updateXY(e) {
    e.preventDefault();
    
    var originalEvent = e.originalEvent;
    var x = originalEvent.clientX;
    var y = originalEvent.clientY;
    
    $("#draggable").css({ top: y, left: x });
    $("#x").text(x);
    $("#y").text(y);
}

* {
    margin: 0;
    padding: 0;
}

#draggable {
    border: 1px dotted gray;
    background: #fff;
    width: 200px;
    padding: 5px;
    text-align: center;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: move;
}

#droppable {
    position: relative;
    border: 1px solid silver;
    height: 300px;
    width: 500px;
    overflow: hidden;
    margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div droppable="true" id="droppable">
    <div draggable="true" id="draggable">Hello world!</div>
</div>
<p>Coordinates: <span id="x">10</span> ; <span id="y">10</span></p>

还有一个JSFiddle：http://jsfiddle.net/tq2zvg41/4/

我该怎么办？

在IE9和IE10上拖放问题

0 个答案: