Question

<!DOCTYPE html>
<html lang=en>
<title>Rearranging paragraphs</title>
<meta content="width=device-width">

</head>
<script>
function allowDrop(allowdropevent) 
{ 
    allowdropevent.target.style.color = 'blue';
    allowdropevent.preventDefault();
}

function drag(dragevent) 
{
    dragevent.dataTransfer.setData("text", dragevent.target.id);
    dragevent.target.style.color = 'green';
}

function drop(dropevent) 
{
    dropevent.preventDefault();
    var data = dropevent.dataTransfer.getData("text");
    dropevent.target.appendChild(document.getElementById(data));
    document.getElementById("drag").style.color = 'black';
}
</script>
<body>
<div  ondrop="drop(event)" ondragover="allowDrop(event)" contenteditable="true">
  <p id="drag" draggable="true" ondragstart="drag(event)" contenteditable="true">me toooo</p>
</div>
</body>
</html>

我使用上面的代码来重新排列段落，但在chrome中，不同段落中的内容会有选择地拖动。请帮忙。

这是我想要使用拖放重新排列的div元素下的不同段落（示例）。现在，当我尝试将单个段落拖动为一个实体时，它不会移动。这就是问题所在。

Answer 1

我理解您正在寻找的内容，但我不相信这是适合您的论坛。话虽如此，您可能会受益于类似于jQuery UI的sortable方法的功能。我认为您不应该嵌套同时为contenteditable的div，因为您最终会遇到与浏览器处理此功能的方式不同的奇怪问题。

如何在一个可信的div中拖放段落？

1 个答案: