Question

我在Mozilla Firefox这是一个更大项目的一小部分。当我将P文本拖入我的DIV并且这个DIV没有孩子时，P文本会正常放入DIV，但是当DIV已经有了孩子P并且我尝试将P文本放入DIV（当然你必须指出DIV中的空白区域，不要再指向P标签的孩子），页面会尝试加载一个带有P文本ID的网址（我不知道原因）。

＆＃13;

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {

    if($(ev.target).children().is('p')){
    //you are pointing the DIV and it has a P child
    
    }else{
      ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data).cloneNode(true));
    }
}

＆＃13;

<!DOCTYPE HTML>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<style>
#div1 {
    width: 350px;
    height: 70px;
    border: 1px solid #aaaaaa;
}
span {
    width: 350px;
    height: 70px;
    background-color: yellow;
    border: 1px solid #aaaaaa;
}
</style>

</head>
<body>

<p>Drag the text into the rectangle to see what happens:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<p id="drag2" draggable="true" ondragstart="drag(event)">DRAGGABLE TEXT</p>

</body>
</html>

＆＃13;

Answer 1

我刚刚使用ev.preventDefault（）解决了这个问题。此方法阻止将要重新加载页面的浏览器的默认操作转到具有可拖动元素的ID的URL，如果可拖动元素是图像，则它将转到图像的源。它只发生在Mozilla Firefox中。

可拖动元素行为

1 个答案: