javascript - 将具有不同 id 的元素拖放到它们相应的放置区

Question

我有十二个具有不同 ID 的参数，我想将它们拖放到相应的云中。四朵云中的每一朵都有至少三个对应的论点。如果错误的参数被放入错误的云中，那么应该显示一条错误消息并将错误的参数发送回初始占位符。到目前为止，我已经成功编写了拖放代码，但由于涉及的 id 数量，我似乎无法将可拖动对象定向到它们预期的放置区。如果有任何帮助，我将不胜感激。

这是我的 html 和 javascript 代码

   
var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
    
  }, false);

<div class="ansicht">
            <div class="b_dotted" id="argumente1" draggable="true" ondragstart="drag(event)">Was ist mit</div>
            <div class="b_dotted" id="argumente2" draggable="true" ondragstart="drag(event)">Individualismus</div>
            <div class="b_dotted" id="argumente3" draggable="true" ondragstart="drag(event)">Der Trittbettfahrer-Vorwand</div>
            <div class="b_dotted" id="argumente4" draggable="true" ondragstart="drag(event)">Technologischer Optimismus </div>
            <div class="b_dotted" id="argumente5" draggable="true" ondragstart="drag(event)">Alles Gerede, wenig Handlung</div>
            <div class="b_dotted" id="argumente6" draggable="true" ondragstart="drag(event)">Lösungskonzept Fossile Energieträger</div>
            <div class="b_dotted" id="argumente7" draggable="true" ondragstart="drag(event)">Keine Peitsche, nur Zuckerbrot </div>
            <div class="b_dotted" id="argumente8" draggable="true" ondragstart="drag(event)">Berufung auf Soziale Gerechtigkeit </div>
            <div class="b_dotted" id="argumente9" draggable="true" ondragstart="drag(event)">Perfektionismus</div>
            <div class="b_dotted" id="argumente10" draggable="true" ondragstart="drag(event)">Berufung auf Wohlstand </div>
            <div class="b_dotted" id="argumente11" draggable="true" ondragstart="drag(event)">Der Untergang</div>
            <div class="b_dotted" id="argumente12" draggable="true" ondragstart="drag(event)">Veränderung ist unmöglich</div>
        </div>
        <div id="grenze">
            <img class="dropzone" id="cloud1" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke1.png">
            <img class="dropzone" id="cloud2" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke2.png">
            <img class="dropzone" id="cloud3" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke3.png">
            <img class="dropzone" id="cloud4" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke4.png"> 
        </div>

Answer 1

好的，如果我理解正确的话，你想要的是将元素拖动到 dropzone 并在满足某些条件时允许操作，否则从我们开始拖动它的地方返回元素。

我在下面的代码片段中所做的是，我给每个 div 一个名为 group 的 attribute，您可以使用 element.attributes 访问它.group.value 并且仅当拖动的元素具有该组编号时才允许触发分离逻辑。希望这会给您带来实现您想要实现的目标的想法。

此外，如果您为 ondrop ondrag 等定义函数，那么您必须将它们定义为函数以避免出现控制台错误，因为 HTML 将在 JS 中查找这些函数。

var dragged;

function allowDrop(event) {}
/* events fired on the draggable target */
function drag(event) {

}

document.addEventListener("dragstart", function(event) {
  // store a ref. on the dragged elem
  dragged = event.target;
  // make it half transparent
  event.target.style.opacity = 0.5;
}, false);

document.addEventListener("dragend", function(event) {
  // reset the transparency
  event.target.style.opacity = "";
}, false);

/* events fired on the drop targets */
document.addEventListener("dragover", function(event) {
  // prevent default to allow drop
  event.preventDefault();
}, false);

document.addEventListener("dragenter", function(event) {
  // highlight potential drop target when the draggable element enters it
  if (event.target.className == "dropzone") {
    event.target.style.background = "purple";
  }

}, false);

document.addEventListener("dragleave", function(event) {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.className == "dropzone") {
    event.target.style.background = "";
  }

}, false);

function drop(event) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  // move dragged elem to the selected drop target
  //check if the target is dropzone and dragged element have the required group value if yes allow append child else dont do anything just reset color and opacity
  debugger;
  if (event.target.className == "dropzone" && dragged.attributes.group.value == event.target.attributes.group.value) {
    event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild(dragged);
    //you may wanna comment success message as these may be annoying
  } else {
    if (event.target.className == "dropzone") {
      event.target.style.background = "";
    }
    dragged.style.opacity = 0.5;
    alert('please drop the item to section : '+dragged.attributes.group.value)
  }



}

<div class="ansicht">
  <div class="b_dotted" group="1" id="argumente1" draggable="true" ondragstart="drag(event)">Was ist mit</div>
  <div class="b_dotted" group="2" id="argumente2" draggable="true" ondragstart="drag(event)">Individualismus</div>
  <div class="b_dotted" group="3" id="argumente3" draggable="true" ondragstart="drag(event)">Der Trittbettfahrer-Vorwand</div>
  <div class="b_dotted" group="4" id="argumente4" draggable="true" ondragstart="drag(event)">Technologischer Optimismus </div>
  <div class="b_dotted" group="1" id="argumente5" draggable="true" ondragstart="drag(event)">Alles Gerede, wenig Handlung</div>
  <div class="b_dotted" group="2" id="argumente6" draggable="true" ondragstart="drag(event)">Lösungskonzept Fossile Energieträger</div>
  <div class="b_dotted" group="3" id="argumente7" draggable="true" ondragstart="drag(event)">Keine Peitsche, nur Zuckerbrot </div>
  <div class="b_dotted" group="4" id="argumente8" draggable="true" ondragstart="drag(event)">Berufung auf Soziale Gerechtigkeit </div>
  <div class="b_dotted" group="1" id="argumente9" draggable="true" ondragstart="drag(event)">Perfektionismus</div>
  <div class="b_dotted" group="2" id="argumente10" draggable="true" ondragstart="drag(event)">Berufung auf Wohlstand </div>
  <div class="b_dotted" group="3" id="argumente11" draggable="true" ondragstart="drag(event)">Der Untergang</div>
  <div class="b_dotted" group="4" id="argumente12" draggable="true" ondragstart="drag(event)">Veränderung ist unmöglich</div>
</div>
<div id="grenze">
  <img class="dropzone" group="1" id="wolke1" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke1.png">
  <img class="dropzone" group="2" id="wolke2" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke2.png">
  <img class="dropzone" group="3" id="wolke3" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke3.png">
  <img class="dropzone" group="4" id="wolke4" ondrop="drop(event)" ondragover="allowDrop(event)" src="img/wolke4.png">
</div>