javascript - 如何在不重新加载整个页面的情况下在 HTML 框中编写 代码

Question

下面的工作代码允许将左侧框中显示的数学符号(通过使用 MathJax)拖到右侧的框中。但是有两个问题。首先，从左边的框中拖出的符号从我不想要的这个左边的框中消失，其次我需要能够写 <div>右侧框中 drop() 函数(显示数学符号)中的代码，以控制符号的显示。我不希望整个页面只刷新右侧框中的内容。在此处查看工作代码:

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {

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

function drop(ev) {

  // here is where I need to write <div> code but not sure how 
  // to start
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}

#header {
  width: 100%;
  background-color: white;
  height: 30px;
}
#container {
  width: 500px;
  background-color: #ffffff;
  margin: auto;
}
#first {
  width: 100px;
  border: 2px solid black;
  float: left;
  height: 300px;
}
#second {
  width: 300px;
  border: 2px solid black;
  float: right;
  height: 100px;
}
#clear {
  clear: both;
}

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<div id="header"></div>
<div id="container">
  <div id="first">
    <span id="drag1" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)">$$\sum$$</span>
    <span id="drag2" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)">$$\int$$</span>
    <span id="drag3" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)">$$\alpha$$</span>
    <span id="drag4" style="text-decoration:overline;" draggable="true" ondragstart="drag(event)">$$\beta$$</span>
  </div>
  <div id="second" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div id="clear"></div>
</div>

Answer 1

当你放下盒子时，你实际上是在将它移动到一个新的 parent 身上。只需克隆拖动项并附加新项

function drop(ev) {

    // here is where I need to write <div> code but not sure how 
    // to start
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text");
    var el = document.getElementById(id).clone(true);
    el.id = ""; // remove the id
    ev.target.appendChild(el);
}

这将复制所有属性和事件，如果您只需要内部文本，您可以简单地创建一个新的 DOM 元素

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.innerText);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");

    // create new element from text
    var el = document.createElement("span");
    el.innerText = data;
    ev.target.appendChild(el);
}