我正在学习拖放,并创建了这个简单的脚本(运行脚本)来检查
function onDrag(ev) {
console.log('You are dragging', ev.target.className)
}
function onDrop(ev) {
ev.preventDefault();
var ul = ev.target;
var li = document.createElement('li');
li.appendChild(document.createTextNode("Text?"));
ul.parentElement.appendChild(li);
}
function onOverDrop(ev) {
ev.preventDefault();
}
ul, li{border:1px solid green}
.container-left, .container-right {width:45%; margin-left:1%; float:left}
<div class="container-left">
<ul>
<li class="A"
draggable="true"
ondragstart="onDrag(event)">A</li>
<li class="B"
draggable="true"
ondragstart="onDrag(event)">B</li>
<li class="C"
draggable="true"
ondragstart="onDrag(event)">C</li>
<li class="D"
draggable="true"
ondragstart="onDrag(event)">D</li>
</ul>
</div>
<div class="container-right">
<ul>
<li> 1
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)">
<li class="1"></li>
</ul>
</li>
<li> 2
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)">
<li class="2"></li>
</ul>
</li>
<li> 3
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)">
<li class="3"></li>
</ul>
</li>
<li> 4
<ul ondrop="onDrop(event)" ondragover="onOverDrop(event)">
<li class="4"></li>
</ul>
</li>
</ul>
</div>
我遇到的问题是在onDrop
方法中,我希望得到我拖动的项的文本和类。例如,当我将A
拖动到右侧并放下时,我希望得到A
,而不是Text?
1条答案
按热度按时间clj7thdc1#
创建一个变量来存储你正在拖动的项的类名,在拖动时将
ev.target.className
附加到变量中。