Question

我正在尝试使用旁边的框创建句子，可以在框中拖放文本。

所以我想只使用javascript创建这个HTML标记：

<div>
  <p>Data1<span class = "smallBox droppable"></span></p>
  <p>Data 2<span class="smallBox droppable"></span></p>
</div>

该代码起作用，我能够将文本拖放到与“Data1”和“Data 2”一起放置的框中。

到目前为止，我有：

var data2 = ['one', 'two', 'three']

function dragDrop2(arr) {
  var length = arr.length;
  var list = document.createElement("div");
  for (var i = 0; i < length; i++) {
    var paragraph = document.createElement("p");
    var spanning = document.createElement("span");
    spanning.classList.add("smallBox", "droppable", "draggable");

    paragraph.appendChild(document.createTextNode(arr[i]));
    paragraph.appendChild(spanning);
    list.appendChild(paragraph);

  }
  return list;
}

document.getElementById("example").appendChild(dragDrop2(data2));

<div id="example"></div>

现在，鉴于我当前的javascript / html尝试，拖放部分在框中不起作用，我不认为“span”标记是“p”标记的内容，因为我的盒子在每个句子下面。

如果有人可以帮助我，我会很感激！另外，有什么东西我可以做看到正在创建的标记？例如，创建一个警报，显示所有的html标记，从原始的'div id =“示例开始”？（html的???）

Answer 1

var data2 = ['one', 'two', 'three']

function dragDrop2(arr) {
  var length = arr.length;
  var list = document.createElement("div");
  for (var i = 0; i < length; i++) {
    var paragraph = document.createElement("p");
    var spanning = document.createElement("span");
    spanning.classList.add("smallBox", "droppable", "draggable");

    spanning.appendChild(document.createTextNode(arr[i]));
    paragraph.appendChild(spanning);
    list.appendChild(paragraph);

  }
  return list;
}

document.getElementById("example").appendChild(dragDrop2(data2));
$( "span" ).draggable().droppable();

p {
  border: 1px solid #000;
  padding: 20px;
}

span {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="example"></div>

我假设你正在使用jquery ui 中的draggable和droppable。

创建元素后，您必须执行draggable和droppable函数。

另一个关键点是改变这一点：

paragraph.appendChild(document.createTextNode(arr[i]));

到此：

spanning.appendChild(document.createTextNode(arr[i]));

在JavaScript中使用createElement，如何在</span> </p> <div>中添加<p>和<span>？

1 个答案: