while dragging draggable element show ids under it

Question

I am using a touch-punch jquery element and I need to somehow now/get the ids of the underlying elements over which the element is moving so that I can change their classes. I have created 6 differenet squares with relevant ids amd I want to actively be taking the id while the draggable element is being dragged over them. I am actually try to simulate the hover action but for a touch screen. I also include the relevant script. Any ideas? thnx.

#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>

strong text

Answer 1

You can use elementFromPoint() to get the element which is currently dragged over. For x.top values that are near the bottom border this returns null, therefore I provided a check for this to prevent any issues. Note that I changed the ids you're using as you have duplicate ids while ids have to be unique.

$(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>