我正在尝试在 JS 和 HTML 中构建两个 ul 并在它们之间拖动 li 。 (不使用 jQuery 的任务)我很确定我在
中做错了什么function handleDrop(e) OR I need to rewrite all.
希望得到您的帮助
这是我的代码。
HTML
<body>
<ul id="columns">
<li class="column" draggable="true"><header>A</header></li>
<li class="column" draggable="true"><header>B</header></li>
<li class="column" draggable="true"><header>C</header></li>
<li class="column" draggable="true"><header>D</header></li>
<li class="column" draggable="true"><header>E</header></li>
</ul>
<ul id="columns_1">
<li class="column" draggable="true"><header>Ad</header></li>
<li class="column" draggable="true"><header>Bd</header></li>
<li class="column" draggable="true"><header>Cd</header></li>
<li class="column" draggable="true"><header>Dd</header></li>
<li class="column" draggable="true"><header>Ed</header></li>
</ul>
</body>
和 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>
最佳答案
您应该从其父元素中删除拖动的元素。而不是来自触发 drop 事件的元素。下面是代码。看看并告诉我这是否是您想要的。
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');
dragSrcEl.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);
var cols_1 = document.querySelectorAll('#columns_1 .column');
[].forEach.call(cols_1, addDnDHandlers);<body>
<ul id="columns">
<li class="column" draggable="true"><header>A</header></li>
<li class="column" draggable="true"><header>B</header></li>
<li class="column" draggable="true"><header>C</header></li>
<li class="column" draggable="true"><header>D</header></li>
<li class="column" draggable="true"><header>E</header></li>
</ul>
<ul id="columns_1">
<li class="column" draggable="true"><header>Ad</header></li>
<li class="column" draggable="true"><header>Bd</header></li>
<li class="column" draggable="true"><header>Cd</header></li>
<li class="column" draggable="true"><header>Dd</header></li>
<li class="column" draggable="true"><header>Ed</header></li>
</ul>
</body>希望这有帮助:)
关于javascript - 将 <li> 拖动到两个 <ul> JS 之间(不使用 jQuery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44920180/