无法检测触摸拖放事件

Question

尝试在浏览器的设备模式下实现拖放事件。我的代码仅适用于浏览器。对于触摸设备，当我只将一个按钮 id 传递给

<块引用>

document.getElementById('1Mis');

但是我有 6 个可以随意拖放的按钮。我如何实现这一目标？我试过使用

<块引用>

querySelectorAll

但是没有用。我也尝试过以下代码，但无法使其适用于不同的按钮 ID。

var source;
var orderNos = [];

function isbefore(a, b) {
  if (a.parentNode == b.parentNode) {
    for (var cur = a; cur; cur = cur.previousSibling) {
      if (cur === b) {
        return true;
      }
    }
  }
  return false;
}

function dragenter(e) {
  var targetelem = e.target;
  if (targetelem.nodeName == "TD") {
    targetelem = targetelem.parentNode;
  }

  if (isbefore(source, targetelem)) {
    targetelem.parentNode.insertBefore(source, targetelem);
  } else {
    targetelem.parentNode.insertBefore(source, targetelem.nextSibling);
  }
}

function dragstart(e) {
  source = e.target;
  e.dataTransfer.effectAllowed = 'move';
}


function show() {

  document.getElementById("emailId").style.display = "block";
  document.getElementById("submitBtn").style.display = "block";
  document.getElementById("emailSubmit").style.display = "none";

}

function tableArray(event) {
  var arrayOfThisRow = [];
  var tableData = document.getElementsByClassName('gradient-button-4');
  for (var i = 0; i < tableData.length; i++) {
    arrayOfThisRow = tableData[i].innerText;
    orderNos.push(arrayOfThisRow);
    console.log("orderNos", orderNos);

  }
}

<table>
  <div id="dragbox">
    [dynamictext uid id:uid "xyz-ips snippet='uniqueId'"]
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)" class="gradient-button-4">
      <td>Miscommunication & Misinterpretation</td>
    </tr>
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)" class="gradient-button-4">
      <td>Communication Delays</td>
    </tr>
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)" class="gradient-button-4">
      <td>Scattered Work and Content</td>
    </tr>
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)" class="gradient-button-4">
      <td>Sharing Work with Others</td>
    </tr>
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)" class="gradient-button-4">
      <td>Getting Feedback and Ideas</td>
    </tr>
    <tr draggable="true" ondragenter="dragenter(event)" ondragstart="dragstart(event)" class="gradient-button-4">
      <td>
        <input type="text" style="border: 1px solid black" placeholder="Any Other?" id="6anyOther" />
      </td>
    </tr>
    <tr>
      <td>
        [email* emailId id:emailId class:emailId placeholder "Enter your business email Id"]
        <button id="emailSubmit" onclick="show();">Submit</button>
        <button id="submitBtn" onclick="tableArray();">Ok</button></td>
      [hidden clicked_on_link clicked_on_link id:clicked_on_link "No"] [hidden orderNos orderNos id:orderNos] [hidden submission_id submission_id id:submission_id "1"]
    </tr>
  </div>
</table>

Answer 1

您可能错误地使用了 querySelectorAll。检查此代码。

但是还有一个错误，似乎您可以将按钮放在彼此的顶部，然后它们会合并，这也会产生错误。这可能不是你想要的 :)

var orderNos = [];

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  console.log("event.target.id", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  console.log("event.target.id", event.target.id);
  orderNos.push(data);
  console.log("drp", orderNos);
}
// var draggable = document.getElementById("1Mis");
var draggables = document.querySelectorAll(".gradient-button-4");


draggables.forEach((draggable) => {
  wrapper = document.getElementById("dropBox");
  /* the drag function */
  draggable.addEventListener(
    "touchmove",
    function(event) {
      // make the element draggable by giving it an absolute position and modifying the x and y coordinates
      draggable.className = draggable.className + " absolute";
      // put the draggable into the wrapper, because otherwise the position will be relative of the parent element
      wrapper.appendChild(draggable);
      var touch = event.targetTouches[0];
      // Place element where the finger is
      draggable.style.left = touch.pageX - 25 + "px";
      draggable.style.top = touch.pageY - 25 + "px";
      event.preventDefault();
    },
    false
  );
});

draggables.forEach((draggable) => {
  draggable.addEventListener("touchend", function(event) {
    // hide the draggable element, or the elementFromPoint won't find what's underneath
    draggable.style.left = "-1000px";
    draggable.style.top = "-1000px";
    // find the element on the last draggable position
    var endTarget = document.elementFromPoint(
      event.changedTouches[0].pageX,
      event.changedTouches[0].pageY
    );
    // position it relative again and remove the inline styles that aren't needed anymore
    removeClass(draggable, "absolute");
    draggable.removeAttribute("style");
    // put the draggable into it's new home
    if (endTarget !== "undefined") {
      endTarget.appendChild(draggable);
    }
  });
});

// wrapper = document.getElementById('dropBox');
// /* the drag function */
// draggable.addEventListener('touchmove', function(event) {
//   // make the element draggable by giving it an absolute position and modifying the x and y coordinates
//   draggable.className = draggable.className + " absolute";
//   // put the draggable into the wrapper, because otherwise the position will be relative of the parent element
//   wrapper.appendChild(draggable);
//   var touch = event.targetTouches[0];
//   // Place element where the finger is
//   draggable.style.left = touch.pageX - 25 + 'px';
//   draggable.style.top = touch.pageY - 25 + 'px';
//   event.preventDefault();
// }, false);

/* the drop function */
// draggable.addEventListener('touchend', function(event) {
//   // hide the draggable element, or the elementFromPoint won't find what's underneath
//   draggable.style.left = '-1000px';
//   draggable.style.top = '-1000px';
//   // find the element on the last draggable position
//   var endTarget = document.elementFromPoint(
//     event.changedTouches[0].pageX,
//     event.changedTouches[0].pageY
//   );
//   // position it relative again and remove the inline styles that aren't needed anymore
//   removeClass(draggable, 'absolute');
//   draggable.removeAttribute('style');
//   // put the draggable into it's new home
//   if (endTarget !== 'undefined') {
//     endTarget.appendChild(draggable);
//   }
// });

// just a little helper function
function removeClass(e, c) {
  e.className = e.className.replace(
    new RegExp("(?:^|\\s)" + c + "(?!\\S)"),
    ""
  );
}

<div class="droptarget" style="border-color:#DE4031;" ondrop="drop(event)">
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="1Mis">Miscommunication & Misinterpretation  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="2Com">Communication Delays </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="3Sca">Scattered Work and Content  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="4Sha">Sharing Work with Others  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="5Get">Getting Feedback and Ideas  </button>
  <input type="text" class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" placeholder="Any Other?" id="6anyOther" />

</div>
<div class="droptarget" id="dropBox" style="border-color:#31CFDE" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

编辑：添加了对按钮放在另一个按钮/输入顶部的情况的简单检测。它检查结束位置“下方”的元素，如果它是类型 button 或 input，它就不会被丢弃在那里。您可能希望改进此检查，使​​其适用于您的应用程序。

根据您的应用程序，您可能希望将挡路的按钮移开，为新放置的按钮腾出空间。在这种情况下，您必须通过按钮循环并调整位置......这有点复杂。如果你需要这个，可以检查一些已经有这个功能的拖放库。

var orderNos = [];

function dragStart(event) {
  event.dataTransfer.setData("Text", event.target.id);
  console.log("event.target.id", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
}

function drop(event) {
  event.preventDefault();
  data = event.dataTransfer.getData("Text");
  event.target.appendChild(document.getElementById(data));
  console.log("event.target.id", event.target.id);
  orderNos.push(data);
  console.log("drp", orderNos);
}
// var draggable = document.getElementById("1Mis");
var draggables = document.querySelectorAll(".gradient-button-4");



draggables.forEach((draggable) => {
  wrapper = document.getElementById("dropBox");
  /* the drag function */
  draggable.addEventListener(
    "touchmove",
    function(event) {
      // make the element draggable by giving it an absolute position and modifying the x and y coordinates
      draggable.className = draggable.className + " absolute";
      // put the draggable into the wrapper, because otherwise the position will be relative of the parent element
      wrapper.appendChild(draggable);
      var touch = event.targetTouches[0];
      // Place element where the finger is
      draggable.style.left = touch.pageX - 25 + "px";
      draggable.style.top = touch.pageY - 25 + "px";
      event.preventDefault();
    },
    false
  );
});

draggables.forEach((draggable) => {
  draggable.addEventListener("touchend", function(event) {
    // hide the draggable element, or the elementFromPoint won't find what's underneath
    draggable.style.left = "-1000px";
    draggable.style.top = "-1000px";
    // find the element on the last draggable position
    var endTarget = document.elementFromPoint(
      event.changedTouches[0].pageX,
      event.changedTouches[0].pageY
    );
    // position it relative again and remove the inline styles that aren't needed anymore
    removeClass(draggable, "absolute");
    draggable.removeAttribute("style");
    // put the draggable into it's new home

    if (endTarget !== "undefined") {
      // check if I am not trying to drop one button on another button
      const warning = document.querySelector(".warning");
      if (endTarget.nodeName === 'BUTTON' || endTarget.nodeName === 'INPUT') {
        warning.innerHTML = "cant drop me here"
      } else {
        endTarget.appendChild(draggable);
        warning.innerHTML = "I have been dropped"
      }


    }
  });
});


// just a little helper function
function removeClass(e, c) {
  e.className = e.className.replace(
    new RegExp("(?:^|\\s)" + c + "(?!\\S)"),
    ""
  );
}

<div class="warning"></div>
<br><br>

<div class="droptarget" style="border-color:#DE4031;" ondrop="drop(event)">
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="1Mis">Miscommunication & Misinterpretation  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="2Com">Communication Delays </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="3Sca">Scattered Work and Content  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="4Sha">Sharing Work with Others  </button>
  <button class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" id="5Get">Getting Feedback and Ideas  </button>
  <input type="text" class="gradient-button-4" ondragstart="dragStart(event)" draggable="true" placeholder="Any Other?" id="6anyOther" />

</div>
<div class="droptarget" id="dropBox" style="border-color:#31CFDE" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>