拖动可拖动元素时在其下方显示 id

Question

我正在使用触摸打孔 jquery 元素，我需要以某种方式 now/get 元素在其上移动的底层元素的 ID，以便我可以更改它们类.我已经创建了 6 个具有相关 id 的 differenet 正方形，我想在可拖动元素被拖动到它们上面时积极地获取 id。我实际上是在尝试模拟悬停动作，但用于触摸屏。我还包括相关脚本。有任何想法吗？谢谢。

#div1 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div3 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div4 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div5 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div6 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#circle_pointer {
  position: absolute;
  top: 200px;
  left: 100px;
  width: 60px;
  height: 60px;
  z-index: 10;
  border-width: 5px;
  border-style: solid;
  border-radius: 50px;
  border-color: rgba(255, 85, 255, 1);
}

#containment_wrapper {
  width: 610px;
  height: 400px;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>


<p id="coordinates">coordinates</p>
<p id="div_id"></p>

<div id="circle_pointer"></div>

<div id="containment_wrapper">
  <div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>

  <div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>
</div>



<script>

  $(function() {
    $("#circle_pointer").draggable({
      containment: "#containment_wrapper",

      drag: function() {
        $("#circle_pointer").addClass("sc"),
          $("#map_container").addClass("sc1"),

          x = $("#circle_pointer").position(),
          $("#coordinates").html(x.top + ' , ' + x.left),
          $("#div_id").html("div_id")
      },

      stop: function() {
        $("#circle_pointer").removeClass("sc")

      }
    });
  });
</script>

强文本

Answer 1

您可以使用elementFromPoint() 来获取当前被拖过来的元素。对于靠近底部边界的 x.top 值 returns null，因此我为此提供了检查以防止出现任何问题。请注意，我更改了您使用的 ID，因为您有重复的 ID，而 ID 必须是唯一的。

$(function() {
  $("#circle_pointer").draggable({
    containment: "#containment_wrapper",

    drag: function() {
      $("#circle_pointer").addClass("sc"),
        $("#map_container").addClass("sc1"),

        x = $("#circle_pointer").position(),
        $("#coordinates").html(x.top + ' , ' + x.left),
        getId(x.top, x.left)

    },
    stop: function() {
      $("#circle_pointer").removeClass("sc")
    }
  });

  function getId(x, y) {

    var element = document.elementFromPoint(y, x);
      if (element != null) {
       var id = element.id;
        $("#div_id").html(id);
      }
  }

});

#div1 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div2 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div3 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div4 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div5 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#div6 {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
}

#circle_pointer {
  position: absolute;
  top: 200px;
  left: 100px;
  width: 60px;
  height: 60px;
  z-index: 10;
  border-width: 5px;
  border-style: solid;
  border-radius: 50px;
  border-color: rgba(255, 85, 255, 1);
}

#containment_wrapper {
  width: 610px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>


<p id="coordinates">coordinates</p>
<p id="div_id"></p>

<div id="circle_pointer"></div>

<div id="containment_wrapper">
  <div>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
  </div>

  <div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
  </div>
</div>

拖动可拖动元素时在其下方显示 id

while dragging draggable element show ids under it

jquery

element

get

ids