Question

我已参考以下代码将其拖放到同一容器中； drag_over和drop函数不能被调用；请提供一些替代方案注意：使用Chrome和FireFox浏览器。

        function drag_start(event) {
            var style = window.getComputedStyle(event.target, null);
            event.dataTransfer.setData("text/plain",
                    (parseInt(style.getPropertyValue("left"), 10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"), 10) - event.clientY));
        }
        function drag_over(event) {
            event.preventDefault();
            return false;
        }
        function drop(event) {
            var offset = event.dataTransfer.getData("text/plain").split(',');
            var dm = document.getElementById('drag_div');
            dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px';
            dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px';

            event.preventDefault();
        }

        $(document).ready(function () {

            var dm = document.getElementById('drag_div');
            dm.addEventListener('dragstart', drag_start, false);

            document.body.addEventListener('dragover', drag_over, false);
            document.body.addEventListener('drop', drop, false);

        });

Answer 1

尝试此演示：

 <!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>

<p id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69"> Drag me to the box </p>

</body>
</html>

在同一容器中拖放

1 个答案: