Question

我想使用html5和javascript将标记拖放到contenteditable="true"元素字符串。

<script>
window.addEventListener("DOMContentLoaded", function(){
  function dragStartFromPalette(event){
    event.dataTransfer.setData("text/html",
    '<original-element class="draggable_element">'+this.innerHTML+'</original-element>');
  }
  function dragEndFromPalette(event){
    event.dataTransfer.effectAllowed = "copyMove";
    event.dataTransfer.dropEffect = "copy";
    event.dataTransfer.getData("text/plain");
    event.preventDefault();
  }
  var light_tags = document.getElementsByClassName('draggable_element');
  for(i = 0; i < light_tags.length; i++){
    light_tags[i].addEventListener('dragstart', dragStartFromPalette);
    light_tags[i].addEventListener('dragend', dragEndFromPalette);
  };
}, false);
</script>

<style>
.draggable_element {
  background-color: rgb(251, 214, 132);
}
</style>

<original-element class="draggable_element" draggable="true">Lorem</original-element>
<original-element class="draggable_element" draggable="true">ipsum</original-element>
<original-element class="draggable_element" draggable="true">dolor</original-element>

<div contenteditable="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, illum reiciendis quas in quam eos iste inventore. Perferendis amet vel, ratione unde rerum? Quasi ea maxime incidunt, perferendis vero. Nesciunt.</div>

这是我的代码https://jsfiddle.net/uzLb5xx0/

第一行将成功。但是，尝试拖放到第二行和后续行将插入不相关的span元素。

如何根据需要插入所有元素？帮助我;（

拖放到contenteditable元素第二行和后续行

0 个答案: