如何在可編輯的div中拖放段落？

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 個解決方案

解決方案1
0 2017-03-27 20:33:42

如何在可編輯的div中拖放段落？

問題描述

1 個解決方案

解決方案1 0 2017-03-27 20:33:42

解決方案1
0 2017-03-27 20:33:42