Question

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

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

当您放弃该框时，您实际上正在将其移动到新的父级。只需克隆拖动项并附加新项

即可

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);
}

如何在HTML框中编写<div>代码而不重新加载整个页面

1 个答案: