Question

我想读一个＆lt; div＆gt;的坐标当它被拖动并将其与静态＆lt; div＆gt;进行比较时并且如果在拖动时它们的所有位置相互交叉，它应该显示一些消息。我想使用jquery或javascript在Web上完成此操作。提前谢谢。

代码可能是这样的（只是一个随机代码）

 function onDivDragged(e){


     var elemOffset=$("#"+e.target.id).offset();
       var elem2Offset=$("#elem2Id").offset();

      if(parseInt(elem2Offset.top.replace("px",""))==parseInt(elemOffset.top.replace("px","") &&  parseInt(elem2Offset.left.replace("px",""))==parseInt(elemOffset.left.replace("px","")))
       {
       alert("intersection occurred");
       }

}

Answer 1

如果使用jQuery UI是一个选项，那么你可以使用jQuery UI Draggable来实现这一目标。

有关详细信息，请访问http://jqueryui.com/draggable/#events

在drag事件期间，获取div的坐标并将其与静态div和计算交集进行比较。

Answer 2

使用下面的javascript代码来获取元素的坐标位置

var elemant = document.getElementById('elementID'),
    left = element.offsetLeft, // returns  X coords
    top = element.offsetTop;  // returns Y coords

Answer 3

您可以使用“ondragover”事件代替手动检查坐标。

http://www.w3schools.com/html/html5_draganddrop.asp

Answer 4

您可以使用jquery获取任何元素的偏移量。

var offset = $("#some-element").offset();

// log the values
console.log("top: " + offset.top+ "left: " + offset.left);

Answer 5

试试这段代码。

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<style>
    #myDiv
    {
        width: 20px;
        height: 20px;
        background-color: Red;
    }
</style>
<script>
    $(document).ready(function () {
        $("#myDiv").draggable({
            start: function (e, ui) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;
                $("#start").html(" x: " + relX + ", y: " + relY);
            },
            stop: function (e, ui) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;
                $("#end").html(" x: " + relX + ", y: " + relY);
            },
            drag: function (e, ui) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;
                $("#current").html(" x: " + relX + ", y: " + relY);
            }

        });
    });


</script>
</head>
<body>
start Position:<span id="start"></span>
<br />
End Position:<span id="end"></span>
<br />
Dragging Position<span id="current"></span>
<div id="myDiv">
</div>
</body>
</html>

如何在拖动时读取DIV的坐标？（JavaScript）的

5 个答案:

如何在拖动时读取DIV的坐标？ （JavaScript）的

5 个答案:

如何在拖动时读取DIV的坐标？（JavaScript）的