Определить позицию элемента в момент перетаскивания
Добрый вечер! Обращаюсь за помощью, потому как гугл мне не помог(
У меня на странице есть объект с абсолютной позицией и left:0. Я перемещаю его курсором по горизонтали, по средствам draggable. То есть фактически изменяю значения left. Подскажите пожалуйста как я могу получать значения left в момент перетаскивания? |
smart-create,
draggable jquery? |
да, да совершенно верно.
<script src="assets/js/jquery-ui.min.js"></script>
<script>
$('.scrollX').draggable({
axis: "x"
})
</script>
|
smart-create,
в документации даже пример есть того, что вы просите http://api.jqueryui.com/draggable/#event-drag
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable({ axis: "x",
drag: function( event, ui ) {
$( "#draggable" ).html(ui.offset.left); // ui.position.left
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
|
Точно.., прошу прощения, я уже 18 часов в js с головой, видимо мозг закоптило, я не заметил. Спасибо
Если Вас не затруднит хотел бы попросить посмотреть на плод моей работы за день. Я основываясь на этой теме сделал на странице "лже" скрол, то есть стандартный скрыл, создал обобьет равный по размеру полосе прокрутки и скриптами связал его положение с прокруткой страницы, что бы можно было стилизовать скролл кросбраузерно. Я все это сделал но получилось не совсем "правильно", я бы даже сказал кривовато. Было бы здорово если бы вы взглянули на плод моей дневной работы и указали на те места где я допустил ошибки. Ссылка на страницу Мой "лже" скррол - горизонтальная полоса прокрутки в низу страницы, сиреневая со скругленными углами Скрипты которые я использовал:
$window.on('load', function() {
var $width = $(document).width() / $(window).width(),
$coef_widht = $(window).width() / $width,
$scroll = $(document).scrollLeft();
$('.scrollX').css({
width: $coef_widht,
left: $scroll + $(window).width() / ($(document).width() / $scroll)
});
$(document).scroll(function() {
var $scroll = $(document).scrollLeft();
$('.scrollX').css({
width: $coef_widht,
left: $scroll + $(window).width() / ($(document).width() / $scroll)
});
})
$('.scrollX').draggable({
axis: "x",
containment: "html",
drag: function( event, ui ) {
$(document).scrollLeft(ui.offset.left - $(window).width() / ($(document).width() / ui.offset.left));
}
)
});
P.S. Заранее благодарен P.P.S Готовые плагины для этой задачи не использовал по нескольким причинам - не хочу утяжелять вес страницы, плагины что я находил плохо работаю с горизонтальной прокруткой, хочу разобраться в этой теме сам |
Утром встал с более имение ясной головой, переписал немного код, получилось вот так (может быть не совсем правильно с точки зрения красоты кода, но работает адекватно):
$window.on('load', function() {
var $width = $(document).width() / $(window).width(),
$coef_widht = $(window).width() / $width,
$scroll = $(document).scrollLeft();
$('.scrollX').css({
width: $coef_widht,
left: $scroll + $(window).width() / ($(document).width() / $scroll)
});
$(document).scroll(function() {
$scroll = $(document).scrollLeft();
$('.scrollX').css({
width: $coef_widht,
left: $scroll + $(window).width() / ($(document).width() / $scroll)
});
})
$('.scrollX').draggable({
axis: "x",
containment: "html",
drag: function( event, ui ) {
$scroll = $(document).scrollLeft();
$(document).scrollLeft(ui.offset.left - (($scroll / $(window).width()) * $coef_widht ));
}
})
});
Я сказал что работает адекватно, но не везде, в мозиле проблемы, на сколько я понял проблемы уже не в моем скрипте, а в самой draggable jquery в мозиле. Сразу после загрузки страницы координата определяются правильно, но стоит проскролить страницу - координата начинает прибавлять к правильному значению сотни а потом и тысячи пикселей... Есть ли какой то способ обойти эту проблему? |
|
Спасибо! Сделал все так как Вы показали в одном из примеров. В мозиле скрол стал работать корректно, по отношению к тому что было раньше. А сейчас ползунок скрола просто перестает бегать за нами в момент прокручивания страницы вниз ( то есть в моем случае вправо), а если прокручивать вверх (у меня влево), то все ок.
Смотрел на код уже больше 6 часов и не могу понять как мне исправить эту ошибку, Помогите пожалуйста P.S. На всякий случай, еще ращ прикрепляю ссылку: http://ru-marketroll.myjino.ru/oleg/ |
Цитата:
|
горизонтальный скролл колёсиком мыши минимальная версия
smart-create,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var a = p = 50,
b = $(window).width() - p - $(".slider").width();
$(".scroll-bar").slider({
max: p,
min: b,
value: b,
slide: function(k, d) {
a = b - d.value + p;
$(".slider").css({
left: a
})
}
});
$(window).on("mousewheel DOMMouseScroll", function(c) {
c.preventDefault();
a += c.originalEvent.wheelDelta || 40 * -c.originalEvent.detail;
a > p && (a = p);
a < b && (a = b);
$("p").html(b - a);
$(".scroll-bar").slider("option", "value", b - a + p);
$(".slider").stop().animate({
left: a
}, 600)
}).on("resize", function() {
a = p;
b = $(window).width() - p - $(".slider").stop().animate({
left: a
},
600).width();
$(".scroll-bar").slider("option", "min", b);
$(".scroll-bar").slider("option", "value", b)
})
});
</script>
<style type="text/css">html,body{
height:100%;
}
body{
overflow:hidden;
position:relative;
}
.slider{
left:50px;
position:absolute;
height:200px;
width:2990px;
background-color:hsla(51,100%,50%,1);
}
.slider img{
height:200px;
padding:0;
}
.scroll-bar{
position:absolute;
left:0;
top:calc(100vh - 16px);
width:calc(100vw - 60px);
}
.ui-slider-horizontal{
height:0px;
}
.ui-slider-horizontal .ui-slider-handle{
top:-4px;
background:#0000FF;
width:56px;
border-radius:8px;
height:8px;
}
:focus{
outline:0;
border:0;
}
</style>
</head>
<body>
<div class="slider">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
<img src="http://static.panoramio.com/photos/large/45836660.jpg" alt="">
</div>
<div class="scroll-bar"></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:33. |