鼠标向上时如何获取td，div标签的id

Question

在这里，我有一个表格，第一个单元格的每一行都包含一个可向右扩展的 Div，这里的 div 位于第一个单元格 id(R1Date1) 中，当我将其扩展到第二个单元格时，我需要提醒第二个单元格 id (R1Date2) 和下面的 Div Id(Book1) 是我尝试过的代码，但它无法正常工作，因为我对 Jquery 事件不太熟悉

window.console = window.console || function(t) {};

if (document.location.search.match(/type=embed/gi)) {

  window.parent.postMessage("resize", "*");

}

window.onload = function() {

  initDragElement();

  initResizeElement();

};

function initDragElement() {

  var pos1 = 0,

    pos2 = 0,

    pos3 = 0,

    pos4 = 0;

  var popups = document.getElementsByClassName("popup");

  var elmnt = null;

  var currentZIndex = 100; //TODO reset z index when a threshold is passed

  for (var i = 0; i < popups.length; i++) {

    if (window.CP.shouldStopExecution(0)) break;

    var popup = popups[i];

    var header = getHeader(popup);

    popup.onmousedown = function() {

      this.style.zIndex = "" + ++currentZIndex;

    };

    if (header) {

      header.parentPopup = popup;

      header.onmousedown = dragMouseDown;

    }

  }

  window.CP.exitedLoop(0);

  function dragMouseDown(e) {

    elmnt = this.parentPopup;

    elmnt.style.zIndex = "" + ++currentZIndex;

    e = e || window.event;

    // get the mouse cursor position at startup:

    pos3 = e.clientX;

    pos4 = e.clientY;

    document.onmouseup = closeDragElement;

    // call a function whenever the cursor moves:

    document.onmousemove = elementDrag;

  }

  function elementDrag(e) {

    if (!elmnt) {

      return;

    }

    e = e || window.event;

    // calculate the new cursor position:

    pos1 = pos3 - e.clientX;

    pos2 = pos4 - e.clientY;

    pos3 = e.clientX;

    pos4 = e.clientY;

    // set the element's new position:

    elmnt.style.top = elmnt.offsetTop - pos2 + "px";

    elmnt.style.left = elmnt.offsetLeft - pos1 + "px";

  }

Answer 1

如果我理解得很好，那么您要做的是在完成拖动时获取鼠标下的元素。您可以使用该功能检索它 document.elementFromPoint(x, y);在这里获取鼠标下的所有重叠元素是一个有用的功能。function getAllElementsFromPoint(x, y) {&nbsp; &nbsp; var elements = [];&nbsp; &nbsp; var visibility = [];&nbsp; &nbsp; var item = document.elementFromPoint(x, y);&nbsp; &nbsp; while (item && item !== document.body && item !== window && item !== document && item !== document.documentElement) {&nbsp; &nbsp; &nbsp; &nbsp; elements.push(item);&nbsp; &nbsp; &nbsp; &nbsp; visibility.push(item.style.visibility);&nbsp; &nbsp; &nbsp; &nbsp; item.style.visibility = "hidden";&nbsp; &nbsp; &nbsp; &nbsp; item = document.elementFromPoint(x, y);&nbsp; &nbsp; }&nbsp; &nbsp; // restore display property&nbsp; &nbsp; for (var i = 0; i < elements.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; elements[i].style.visibility = visibility[i];&nbsp; &nbsp; }&nbsp; &nbsp; return elements;}一旦你得到它们，你只需要从返回的数组中获取适合你的第一个元素。这是完整的例子。window.console = window.console || function(t) {};if (document.location.search.match(/type=embed/gi)) {&nbsp; window.parent.postMessage("resize", "*");}window.onload = function() {&nbsp; initDragElement();&nbsp; initResizeElement();};function initDragElement() {&nbsp; var pos1 = 0,&nbsp; &nbsp; pos2 = 0,&nbsp; &nbsp; pos3 = 0,&nbsp; &nbsp; pos4 = 0;&nbsp; var popups = document.getElementsByClassName("popup");&nbsp; var elmnt = null;&nbsp; var currentZIndex = 100; //TODO reset z index when a threshold is passed&nbsp; for (var i = 0; i < popups.length; i++) {&nbsp; &nbsp; if (window.CP.shouldStopExecution(0)) break;&nbsp; &nbsp; var popup = popups[i];&nbsp; &nbsp; var header = getHeader(popup);&nbsp; &nbsp; popup.onmousedown = function() {&nbsp; &nbsp; &nbsp; this.style.zIndex = "" + ++currentZIndex;&nbsp; &nbsp; };&nbsp; &nbsp; if (header) {&nbsp; &nbsp; &nbsp; header.parentPopup = popup;&nbsp; &nbsp; &nbsp; header.onmousedown = dragMouseDown;&nbsp; &nbsp; }&nbsp; }&nbsp; window.CP.exitedLoop(0);&nbsp; function dragMouseDown(e) {&nbsp; &nbsp; elmnt = this.parentPopup;&nbsp; &nbsp; elmnt.style.zIndex = "" + ++currentZIndex;&nbsp; &nbsp; e = e || window.event;&nbsp; &nbsp; // get the mouse cursor position at startup:&nbsp; &nbsp; pos3 = e.clientX;&nbsp; &nbsp; pos4 = e.clientY;&nbsp; &nbsp; document.onmouseup = closeDragElement;&nbsp; &nbsp; // call a function whenever the cursor moves:&nbsp; &nbsp; document.onmousemove = elementDrag;&nbsp; }&nbsp; function elementDrag(e) {&nbsp; &nbsp; if (!elmnt) {&nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; }&nbsp; &nbsp; e = e || window.event;&nbsp; &nbsp; // calculate the new cursor position:&nbsp; &nbsp; pos1 = pos3 - e.clientX;&nbsp; &nbsp; pos2 = pos4 - e.clientY;&nbsp; &nbsp; pos3 = e.clientX;&nbsp; &nbsp; pos4 = e.clientY;&nbsp; &nbsp; // set the element's new position:&nbsp; &nbsp; elmnt.style.top = elmnt.offsetTop - pos2 + "px";&nbsp; &nbsp; elmnt.style.left = elmnt.offsetLeft - pos1 + "px";&nbsp; }&nbsp; function closeDragElement() {&nbsp; &nbsp; /* stop moving when mouse button is released:*/&nbsp; &nbsp; document.onmouseup = null;&nbsp; &nbsp; document.onmousemove = null;&nbsp; }&nbsp; function getHeader(element) {&nbsp; &nbsp; var headerItems = element.getElementsByClassName("popup-header");&nbsp; &nbsp; if (headerItems.length === 1) {&nbsp; &nbsp; &nbsp; return headerItems[0];&nbsp; &nbsp; }&nbsp; &nbsp; return null;&nbsp; }}function getAllElementsFromPoint(x, y) {&nbsp; &nbsp; var elements = [];&nbsp; &nbsp; var visibility = [];&nbsp; &nbsp; var item = document.elementFromPoint(x, y);&nbsp; &nbsp; while (item && item !== document.body && item !== window && item !== document && item !== document.documentElement) {&nbsp; &nbsp; &nbsp; &nbsp; elements.push(item);&nbsp; &nbsp; &nbsp; &nbsp; visibility.push(item.style.visibility);&nbsp; &nbsp; &nbsp; &nbsp; item.style.visibility = "hidden";&nbsp; &nbsp; &nbsp; &nbsp; item = document.elementFromPoint(x, y);&nbsp; &nbsp; }&nbsp; &nbsp; // restore display property&nbsp; &nbsp; for (var i = 0; i < elements.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; elements[i].style.visibility = visibility[i];&nbsp; &nbsp; }&nbsp; &nbsp; return elements;}function initResizeElement() {&nbsp; var popups = document.getElementsByClassName("popup");&nbsp; var element = null;&nbsp; var startX, startY, startWidth, startHeight;&nbsp; for (var i = 0; i < popups.length; i++) {&nbsp; &nbsp; if (window.CP.shouldStopExecution(1)) break;&nbsp; &nbsp; var p = popups[i];&nbsp; &nbsp; var right = document.createElement("div");&nbsp; &nbsp; right.className = "resizer-right";&nbsp; &nbsp; p.appendChild(right);&nbsp; &nbsp; right.addEventListener("mousedown", initDrag, false);&nbsp; &nbsp; right.parentPopup = p;&nbsp; &nbsp; var bottom = document.createElement("div");&nbsp; &nbsp; bottom.className = "resizer-bottom";&nbsp; &nbsp; p.appendChild(bottom);&nbsp; &nbsp; bottom.addEventListener("mousedown", initDrag, false);&nbsp; &nbsp; bottom.parentPopup = p;&nbsp; &nbsp; var both = document.createElement("div");&nbsp; &nbsp; both.className = "resizer-both";&nbsp; &nbsp; p.appendChild(both);&nbsp; &nbsp; both.addEventListener("mousedown", initDrag, false);&nbsp; &nbsp; both.parentPopup = p;&nbsp; }&nbsp; window.CP.exitedLoop(1);&nbsp; function initDrag(e) {&nbsp; &nbsp; element = this.parentPopup;&nbsp; &nbsp; startX = e.clientX;&nbsp; &nbsp; startY = e.clientY;&nbsp; &nbsp; startWidth = parseInt(&nbsp; &nbsp; &nbsp; document.defaultView.getComputedStyle(element).width, 10);&nbsp; &nbsp; startHeight = parseInt(&nbsp; &nbsp; &nbsp; document.defaultView.getComputedStyle(element).height, 10);&nbsp; &nbsp; document.documentElement.addEventListener("mousemove", doDrag, false);&nbsp; &nbsp; document.documentElement.addEventListener("mouseup", stopDrag, false);&nbsp; }&nbsp; function doDrag(e) {&nbsp; &nbsp; element.style.width = startWidth + e.clientX - startX + "px";&nbsp; &nbsp; // element.style.height = startHeight + e.clientY - startY + "px";&nbsp; }&nbsp; function stopDrag(e) {&nbsp;&nbsp;&nbsp; &nbsp; let x = e.clientX;&nbsp; &nbsp; let y = e.clientY;&nbsp; &nbsp; let elementsUderTheMouse = getAllElementsFromPoint(x, y);&nbsp; &nbsp; let tdUnderTheMouse = elementsUderTheMouse.find(function(element) {&nbsp; &nbsp; &nbsp; return element.tagName === "TD";&nbsp; &nbsp; });&nbsp; &nbsp; console.log(elementsUderTheMouse);&nbsp; &nbsp; alert(tdUnderTheMouse.id);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; document.documentElement.removeEventListener("mousemove", doDrag, false);&nbsp; &nbsp; document.documentElement.removeEventListener("mouseup", stopDrag, false);&nbsp; }}$(window).load(function() {&nbsp; $(document).on("mouseup", ".mybox", function(event) {&nbsp; &nbsp; if (event.target === this) {&nbsp; &nbsp; &nbsp; alert($(this).attr("id"));&nbsp; &nbsp; }&nbsp; });});tr {&nbsp; height: 50px;}td {&nbsp; position: relative;}.popup {&nbsp; z-index: 9;&nbsp; background-color: #f1f1f1;&nbsp; border: 1px solid #d3d3d3;&nbsp; text-align: center;&nbsp; /* min-height: 150px;&nbsp; &nbsp; min-width: 300px;&nbsp; &nbsp; max-height: 300px;&nbsp; &nbsp; max-width: 600px;*/}/*Drgable */.popup {&nbsp; position: absolute;&nbsp; /*resize: both; !*enable this to css resize*! */&nbsp; overflow: auto;}.popup-header {&nbsp; padding: 10px;&nbsp; cursor: move;&nbsp; z-index: 10;&nbsp; background-color: #2196f3;&nbsp; color: #fff;}.popup-header_No {&nbsp; z-index: 10;&nbsp; background-color: #2196f3;&nbsp; color: #fff;}/*Resizeable*/.popup .resizer-right {&nbsp; width: 5px;&nbsp; height: 100%;&nbsp; background: transparent;&nbsp; position: absolute;&nbsp; right: 0;&nbsp; bottom: 0;&nbsp; cursor: e-resize;}/*&nbsp; &nbsp; .popup .resizer-bottom {&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp;height: 5px;&nbsp; &nbsp; &nbsp;background: transparent;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; cursor: n-resize;&nbsp; &nbsp; }&nbsp; &nbsp; .popup .resizer-both {&nbsp; &nbsp; &nbsp;width: 5px;&nbsp; &nbsp; &nbsp; height: 5px;&nbsp; &nbsp; &nbsp; background: transparent;&nbsp; &nbsp; &nbsp; z-index: 10;&nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; right: 0;&nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; cursor: nw-resize;&nbsp; &nbsp; }*//*NOSELECT*/.popup * {&nbsp; -webkit-touch-callout: none;&nbsp; /* iOS Safari */&nbsp; -webkit-user-select: none;&nbsp; /* Safari */&nbsp; -khtml-user-select: none;&nbsp; /* Konqueror HTML */&nbsp; -moz-user-select: none;&nbsp; /* Firefox */&nbsp; -ms-user-select: none;&nbsp; /* Internet Explorer/Edge */&nbsp; user-select: none;&nbsp; /* Non-prefixed version, currently&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; supported by Chrome and Opera */}<html><head>&nbsp; <meta charset="UTF-8">&nbsp; <style>&nbsp; </style>&nbsp; <script>&nbsp; </script></head><body>&nbsp; <table border="1" style="width:100%">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td id="R1Date1" class="mybox">&nbsp; &nbsp; &nbsp; &nbsp; <div class="popup" id='Book1'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="popup-header_No">Click here to move</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td id='R1Date2'></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td id="R2Date1">&nbsp; &nbsp; &nbsp; &nbsp; <div class="popup" id='Book2'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="popup-header_No">Click here to move</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td id="R2Date2"></td>&nbsp; &nbsp; </tr>&nbsp; </table>&nbsp; <script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>&nbsp; <script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>