Привет, я смотрел библиотеку перетаскивания jQuery для метода, в котором, если я удерживаю кнопку мыши и перетаскиваю мышь, затем отпустите кнопку, я получу начальную и конечную координаты этого перетаскивание, основанное на исходных пикселях экрана. Я нарисовал пробел по этому поводу и ничего не нашел на StackOverlaod.jQuery drag - чтобы получить начальные и конечные координаты
Может ли кто-нибудь рекомендовать пример?
Благодаря 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>
Отредактировано Если вы хотите, чтобы получить позицию мыши без сопротивления элемента, использовать как этот
<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>
Прочитайте документ о '.draggable()' API JQuery UI в. В нем объясняется, как использовать '.start' и' .stop'. В принципе, вы будете кодировать что-то вроде '$ (" # foo "). Draggable() {start: function() {// получить координаты}, stop: function() {// получить координаты}});'. Посмотрите на эти прекрасные примеры ^^ http://jqueryui.com/draggable/#events – TCHdvlp