将具有不同ID的元素拖放到其相应的放置区中 [英] Drag and drop elements with different id's into their corresponding dropzones

问题描述

我想将十二个具有不同ID的参数拖放到其对应的云中.四个云中的每一个都有至少三个对应的参数.如果将错误的参数放在错误的云中，则应该显示一条错误消息，并将错误的参数发送回初始占位符.到目前为止，我已经成功地对拖放进行了编码，但是由于涉及的id数量，我似乎无法将可拖动对象定向到其预期的放置区.我将不胜感激.

这是我的html和javascript代码

 var drag;/*在可拖动目标上触发的事件*/document.addEventListener("drag"，function(event){}， 错误的);document.addEventListener("dragstart"，function(event){//存储参考.在被拖曳的元素上拖动= event.target;//使其半透明event.target.style.opacity = .5;}， 错误的);document.addEventListener("dragend"，function(event){//重置透明度event.target.style.opacity =";}， 错误的);/*在放置目标上触发的事件*/document.addEventListener("dragover"，function(event){//阻止默认值以允许删除event.preventDefault();}， 错误的);document.addEventListener("dragenter"，function(event){//当可拖动元素进入时，高亮显示潜在的放置目标如果(event.target.className =="dropzone"){event.target.style.background =紫色";}}， 错误的);document.addEventListener("dragleave"，function(event){//当可拖动元素离开目标时，重置潜在放置目标的背景如果(event.target.className =="dropzone"){event.target.style.background =";}}， 错误的);document.addEventListener("drop"，function(event){//阻止默认操作(打开为某些元素的链接)event.preventDefault();//将拖动的元素移动到选定的放置目标如果(event.target.className =="dropzone"){event.target.style.background =";dragged.parentNode.removeChild(dragged);event.target.appendChild(dragged);}}，否)；  

 < div class ="ansicht">< div class ="b_dotted" id ="argumente1" draggable ="true" ondragstart ="drag(event)">是mit</div>< div class ="b_dotted" id ="argumente2" draggable ="true" ondragstart ="drag(event)">个人主义</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ösungskonzeptFossileEnergieträger</div>< div class ="b_dotted" id ="argumente7" draggable ="true" ondragstart ="drag(event)"> Keine Peitsche，努尔扎克布罗特</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)">验证码</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>  

解决方案

好，因此，如果我正确理解了您想要的是将元素拖动到 dropzone 并允​​许在某些条件通过的情况下进行操作，否则返回我们从其开始拖动的位置开始的元素.

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

如果您还为 ondrop ondrag 等定义函数，则必须将它们定义为函数，以避免出现控制台错误，因为HTML会在JS中寻找这些函数./p>

  var拖动；函数allowDrop(event){}/*在可拖动目标上触发的事件*/函数drag(event){}document.addEventListener("dragstart"，function(event){//存储参考.在被拖曳的元素上拖动= event.target;//使其半透明event.target.style.opacity = 0.5;}， 错误的);document.addEventListener("dragend"，function(event){//重置透明度event.target.style.opacity =";}， 错误的);/*在放置目标上触发的事件*/document.addEventListener("dragover"，function(event){//阻止默认值以允许删除event.preventDefault();}， 错误的);document.addEventListener("dragenter"，function(event){//当可拖动元素进入时，高亮显示潜在的放置目标如果(event.target.className =="dropzone"){event.target.style.background =紫色";}}， 错误的);document.addEventListener("dragleave"，function(event){//当可拖动元素离开目标时，重置潜在放置目标的背景如果(event.target.className =="dropzone"){event.target.style.background =";}}， 错误的);函数drop(event){//阻止默认操作(打开为某些元素的链接)event.preventDefault();//将拖动的元素移动到选定的放置目标//检查目标是否为dropzone和拖动的元素是否具有所需的组值，如果是，则允许添加子项，否则不执行任何操作，仅重置颜色和不透明度调试器；如果(event.target.className =="dropzone"&& dragged.attributes.group.value == event.target.attributes.group.value){event.target.style.background =";dragged.parentNode.removeChild(拖动);event.target.appendChild(拖动);//您可能想评论成功消息，因为这些消息可能会令人讨厌} 别的 {如果(event.target.className =="dropzone"){event.target.style.background =";}dragged.style.opacity = 0.5;alert('请将该项目放到以下部分:'+ dragged.attributes.group.value)}}  

 < div class ="ansicht">< div class ="b_dotted" group ="1" id ="argumente1" draggable ="true" ondragstart ="drag(event)">是mit</div>< div class ="b_dotted" group ="2" id ="argumente2" draggable ="true" ondragstart ="drag(event)">个人主义</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ösungskonzeptFossileEnergieträger</div>< div class ="b_dotted" group ="3" id ="argumente7" draggable ="true" ondragstart ="drag(event)"> Keine Peitsche，努尔扎克布罗特</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)">验证码</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>  

I have twelve arguments with different id's that i'd like to drag and drop into their corresponding clouds. Each of the four clouds has atleast three corresponding arguments. Should the wrong argument be dropped in the wrong cloud then there should be an error message displayed and the wrong argument sent back to the initial placeholder. I have so far succeeded in coding the drag and drop but i can't seem to direct the draggables to their intended dropzones owing to the number of id's involved. I would appreciate any help.

Here is my html and javascript code

   
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>

解决方案

Ok, so if I understood correctly what you wanted was to drag element to dropzone and allow operation if some condition is passed, else return the element from where we started dragging it.

What I did in below snippet is I gave each div an attribute called group which you can access using element.attributes.group.value and only allowing the detach logic to trigger if the dragged element has that group number. hope this will give you idea to implement what you are trying to achieve.

also if you define function for ondrop ondrag etc then you have to define them as function to avoid getting console error as HTML will look for these function in 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>

这篇关于将具有不同ID的元素拖放到其相应的放置区中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！