Javascript 阻力<；李>；两者之间<；ul>；JS（不带jQuery）

我试图在JS和HTML中构建两个ul，并在它们之间拖动li。（在不使用jQuery的情况下对其执行任务）我非常确定我在

function handleDrop(e)  OR I need to rewrite all.

希望你的帮助

这是我的密码

HTML

A
B
C
D
E


广告
Bd
光盘
Dd
Ed

和JS

<script type="text/javascript">

var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.outerHTML);

  this.classList.add('dragElem');
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  this.classList.add('over');

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
     console.log('handleDragEnter');
        e.preventDefault();

  // this / e.target is the current hover target.
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

function handleDrop(e) {
  // this/e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // Stops some browsers from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != this) {
    // Set the source column's HTML to the HTML of the column we dropped on.
    //alert(this.outerHTML);
    //dragSrcEl.innerHTML = this.innerHTML;
    //this.innerHTML = e.dataTransfer.getData('text/html');
    this.parentNode.removeChild(dragSrcEl);
    var dropHTML = e.dataTransfer.getData('text/html');
    this.insertAdjacentHTML('beforebegin',dropHTML);
    var dropElem = this.previousSibling;
    addDnDHandlers(dropElem);

  }
  this.classList.remove('over');
  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.
  this.classList.remove('over');

  /*[].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });*/
}

function addDnDHandlers(elem) {
  elem.addEventListener('dragstart', handleDragStart, false);
  elem.addEventListener('dragenter', handleDragEnter, false)
  elem.addEventListener('dragover', handleDragOver, false);
  elem.addEventListener('dragleave', handleDragLeave, false);
  elem.addEventListener('drop', handleDrop, false);
  elem.addEventListener('dragend', handleDragEnd, false);

}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, addDnDHandlers);
cols


var cols_1 = document.querySelectorAll('#columns_1 .column');
[].forEach.call(cols, addDnDHandlers);

</script>

var dragSrcEl=null；
函数handleDragStart（e）{
//目标（此）元素是源节点。
dragSrcEl=此；
e、 dataTransfer.effectAllowed='move'；
e、 dataTransfer.setData（'text/html'，this.outerHTML）；
this.classList.add（'dragElem'）；
}
功能手柄（e）{
如果（如默认）{
e、 preventDefault（）；//必要。允许我们删除。
}
this.classList.add（'over'）；
e、 dataTransfer.dropEffect='move'；//请参阅有关dataTransfer对象的部分。
返回false；
}
功能手柄输入（e）{
console.log（'handleDragEnter'）；
e、 预防默认值（）；
//此/e.target是当前悬停目标。
}
功能手柄（e）{
this.classList.remove（'over'）；//this/e.target是上一个目标元素。
}
函数handleDrop（e）{
//此/e.target是当前目标元素。
如果（如停止播放）{
e、 stopPropagation（）；//停止某些浏览器重定向。
}
//如果删除我们正在拖动的同一列，请不要执行任何操作。
if（dragSrcEl！=此）{
//将源列的HTML设置为我们删除的列的HTML。
//警报（this.outerHTML）；
//dragSrcEl.innerHTML=this.innerHTML；
//this.innerHTML=e.dataTransfer.getData（'text/html'）；
this.parentNode.removeChild（dragSrcEl）；
var dropHTML=e.dataTransfer.getData（'text/html'）；
this.insertAdjacentHTML（'beforebeagin'，dropHTML）；
var dropElem=此.previousSibling；
添加DndHandler（dropElem）；
}
this.classList.remove（'over'）；
返回false；
}
功能手柄（e）{
//此/e.target是源节点。
this.classList.remove（'over'）；
/*[]forEach.call（列，函数（列）{
col.classList.remove（'over'）；
});*/
}
函数addDnDHandlers（elem）{
元素addEventListener（'dragstart'，handleDragStart，false）；
元素addEventListener（'dragenter'，handleDragEnter，false）
元素addEventListener（'Dragver'，handleDragOver，false）；
元素addEventListener（'dragleave'，handleDragLeave，false）；
元素addEventListener（'drop'，handleDrop，false）；
元素addEventListener（'dragend'，handleDragEnd，false）；
}
var cols=document.querySelectorAll（'#columns.column'）；
[]forEach.call（cols、adddndhandler）；
科尔斯
var cols_1=document.querySelectorAll（“#columns_1.column”）；
[]forEach.call（cols、adddndhandler）；

您应该将拖动的元素从其父元素中删除。而不是从触发丢弃事件的elemet。下面是代码。看一看，让我知道这是否是你想要的

var-dragSrcEl=null；
函数handleDragStart（e）{
//目标（此）元素是源节点。
dragSrcEl=此；
e、 dataTransfer.effectAllowed='move'；
e、 dataTransfer.setData（'text/html'，this.outerHTML）；
this.classList.add（'dragElem'）；
}
功能手柄（e）{
如果（如默认）{
e、 preventDefault（）；//必要。允许我们删除。
}
this.classList.add（'over'）；
e、 dataTransfer.dropEffect='move'；//请参阅有关dataTransfer对象的部分。
返回false；
}
功能手柄输入（e）{
//console.log（'handleDragEnter'）；
e、 预防默认值（）；
//此/e.target是当前悬停目标。
}
功能手柄（e）{
this.classList.remove（'over'）；//this/e.target是上一个目标元素。
}
函数handleDrop（e）{
//此/e.target是当前目标元素。
如果（如停止播放）{
e、 stopPropagation（）；//停止某些浏览器重定向。
}
//如果删除我们正在拖动的同一列，请不要执行任何操作。
if（dragSrcEl！=此）{
//将源列的HTML设置为我们删除的列的HTML。
//警报（this.outerHTML）；
//dragSrcEl.innerHTML=this.innerHTML；
//this.innerHTML=e.dataTransfer.getData（'text/html'）；
dragSrcEl.parentNode.removeChild（dragSrcEl）；
var dropHTML=e.dataTransfer.getData（'text/html'）；
this.insertAdjacentHTML（'beforebeagin'，dropHTML）；
var dropElem=此.previousSibling；
添加DndHandler（dropElem）；
}
this.classList.remove（'over'）；
返回false；
}
功能手柄（e）{
//此/e.target是源节点。
this.classList.remove（'over'）；
/*[]forEach.call（列，函数（列）{
col.classList.remove（'over'）；
});*/
}
函数addDnDHandlers（elem）{
元素addEventListener（'dragstart'，handleDragStart，false）；
元素addEventListener（'dragenter'，handleDragEnter，false）
元素addEventListener（'Dragver'，handleDragOver，false）；
元素addEventListener（'dragleave'，handleDragLeave，false）；
元素addEventListener（'drop'，handleDrop，false）；
元素addEventListener（'dragend'，handleDragEnd，false）；
}
var cols=document.querySelectorAll（'#columns.column'）；
[]forEach.call（cols、adddndhandler）；
var cols_1=document.querySelectorAll（“#columns_1.column”）；
[]forEach.call（cols_1，adddndhandler）


A
B
C
D
E


广告
Bd
<script type="text/javascript">

var dragSrcEl = null;

function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.outerHTML);

  this.classList.add('dragElem');
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  this.classList.add('over');

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
     console.log('handleDragEnter');
        e.preventDefault();

  // this / e.target is the current hover target.
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

function handleDrop(e) {
  // this/e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // Stops some browsers from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != this) {
    // Set the source column's HTML to the HTML of the column we dropped on.
    //alert(this.outerHTML);
    //dragSrcEl.innerHTML = this.innerHTML;
    //this.innerHTML = e.dataTransfer.getData('text/html');
    this.parentNode.removeChild(dragSrcEl);
    var dropHTML = e.dataTransfer.getData('text/html');
    this.insertAdjacentHTML('beforebegin',dropHTML);
    var dropElem = this.previousSibling;
    addDnDHandlers(dropElem);

  }
  this.classList.remove('over');
  return false;
}

function handleDragEnd(e) {
  // this/e.target is the source node.
  this.classList.remove('over');

  /*[].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });*/
}

function addDnDHandlers(elem) {
  elem.addEventListener('dragstart', handleDragStart, false);
  elem.addEventListener('dragenter', handleDragEnter, false)
  elem.addEventListener('dragover', handleDragOver, false);
  elem.addEventListener('dragleave', handleDragLeave, false);
  elem.addEventListener('drop', handleDrop, false);
  elem.addEventListener('dragend', handleDragEnd, false);

}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, addDnDHandlers);
cols


var cols_1 = document.querySelectorAll('#columns_1 .column');
[].forEach.call(cols, addDnDHandlers);

</script>