html 如何在javascript中获取拖动项的文本

bq3bfh9z  于 2023-01-28  发布在  Java
关注(0)|答案(1)|浏览(106)

我正在学习拖放,并创建了这个简单的脚本(运行脚本)来检查

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?

clj7thdc

clj7thdc1#

创建一个变量来存储你正在拖动的项的类名,在拖动时将ev.target.className附加到变量中。

let classNameOfItem = ''

function onDrag(ev) {
  console.log('You are dragging', ev.target.className)
  classNameOfItem = ev.target.className
}

function onDrop(ev) {
  ev.preventDefault();
  var ul =  ev.target;
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(classNameOfItem));
  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>

相关问题