jQuery drag - чтобы получить начальную и конечную координаты

Question

jQuery drag - чтобы получить начальную и конечную координаты

Привет! Я искал в библиотеке перетаскивания jQuery метод, с помощью которого, если я удерживаю кнопку мыши и перетаскиваю мышь, затем отпускаю кнопку, я получаю начальную и конечную координаты этого перетаскивания на основе необработанных пикселей экрана. Я нарисовал пробел и ничего не нашел в StackOverlaod.

Кто-нибудь может порекомендовать пример?

Спасибо Грэм

1

jquery drag mouse-coordinates

Источник

user3199055 29 янв '14 в 13:00

1 ответ

Решение

Другие вопросы по тегам jquery drag mouse-coordinates

user2281280 29 янв '14 в 13:14 2014-01-29 13:14 · Accepted Answer · 2014-01-29 13:14

Вы можете использовать получить события 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>

Отредактировано Если вы хотите получить положение мыши без элемента перетаскивания, используйте как это

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