jQuery拖动-获取开始和停止坐标_Jquery_Drag_Mouse Coordinates

jQuery拖动-获取开始和停止坐标

jquery

jQuery拖动-获取开始和停止坐标,jquery,drag,mouse-coordinates,Jquery,Drag,Mouse Coordinates,您好，我一直在查看jQuery的拖动库，寻找一种方法，如果我按住鼠标按钮并拖动鼠标，然后松开按钮，我将根据原始屏幕像素获得该拖动的开始和结束坐标。我在上面画了个空白，在StackOverlod上也没有发现任何东西有人能推荐一个例子吗谢谢 Graham您可以使用获取dragstart和dragend的事件。试试这个代码 <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min.js"&

您好，我一直在查看jQuery的拖动库，寻找一种方法，如果我按住鼠标按钮并拖动鼠标，然后松开按钮，我将根据原始屏幕像素获得该拖动的开始和结束坐标。我在上面画了个空白，在StackOverlod上也没有发现任何东西

有人能推荐一个例子吗

谢谢

Graham

您可以使用获取dragstart和dragend的事件。试试这个代码

<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);
            }

        });
    });

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

</body>
</html>


#myDiv
{
宽度：20px；
高度：20px；
背景色：红色；
}
$（文档）.ready（函数（）{
美元（“#myDiv”）。可拖动({
开始：功能（e、ui）{
var parentOffset=$（this.parent（）.offset（）；
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
$（“#开始”）.html（“x:+relX+”，y:+rele）；
},
停止：功能（e、ui）{
var parentOffset=$（this.parent（）.offset（）；
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
$（“#end”）.html（“x:+relX+”，y:+rele）；
}
});
});
起始位置：


结束位置：

编辑如果希望在不使用拖动元素的情况下获得鼠标位置，请使用以下命令

<script>
    $(document).ready(function () {
        $("body").mousedown(function (e) {
            var parentOffset = $(this).parent().offset();
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            $("#start").html(" x: " + relX + ", y: " + relY);
        });

        $("body").mouseup(function (e) {
            var parentOffset = $(this).parent().offset();
            var relX = e.pageX - parentOffset.left;
            var relY = e.pageY - parentOffset.top;
            $("#end").html(" x: " + relX + ", y: " + relY);
        });

    });
</script>


$（文档）.ready（函数（）{
$（“正文”）.mousedown（函数（e）{
var parentOffset=$（this.parent（）.offset（）；
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
$（“#开始”）.html（“x:+relX+”，y:+rele）；
});
$（“body”）.mouseup（函数（e）{
var parentOffset=$（this.parent（）.offset（）；
var relX=e.pageX-parentOffset.left；
var relen=e.pageY-parentOffset.top；
$（“#end”）.html（“x:+relX+”，y:+rele）；
});
});

阅读JQuery UI的

.draggable（）

API上的文档。它解释了如何使用

.start

和

.stop

。基本上，您将编写类似

$（“#foo”）.draggable（）{start:function（）{//get coordinates}，stop:function（）{//get coordinates}）。看看那些漂亮的例子^^^如果我想在屏幕的任意部分拖动，而没有可拖动的对象，我可以这样做吗？