Вопрос по javascript, jquery, jquery-ui – jQuery Перетаскиваемая пользовательская привязка к сетке
Я использую jQuery UI Draggable в проекте. У меня есть флажок, который включает параметр сетки (10x10 сетки) на перетаскиваемых объектах.
Однако при повторном включении сетки объекты, которые были перемещены, когда сетка была отключена, не совпадают с объектами, которые не были перемещены при выключении сетки. Короче говоря, объекты находятся на отдельных сетках, которые не выстраиваются в линию.
Поэтому я хотел бы, чтобы объекты привязывались с шагом 10 (пока пользователь их перетаскивает, а не просто щелкает при отпускании), чтобы объекты всегда выстраивались в линию при включении сетки, но мне кажется, что выяснить, как реализовать это в jQuery UI. Есть идеи?
Была такая же проблема - решение здесь:stackoverflow.com/a/20712561/165673
Yarin
2
ответа
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable {
width: 100px;
height: 100px;
background: orange;
}
#container {
width: 200px;
height: 200px;
background: black;
}
</style>
<script>
$(document).ready(function() {
$("#draggable").draggable({
containment: 'parent',
//grid: [10,10],
cursor: "move",
stop: function(event, ui) {
let startPosition = $(ui.helper).position();
$(ui.helper).css({
'left': (Math.round(startPosition.left / 10.0) * 10.0) - 10.0 + 'px',
'top': (Math.round(startPosition.top / 10.0) * 10.0) - 10.0 + 'px'
});
console.log(ui.helper.position());
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="draggable">Drag me</div>
</div>
</body>Вы можете добавить функцию остановки, которая изменила бы положение верхней левой точки элемента, чтобы он поместился в сетку после освобождения перетаскиваемого элемента. В данном случае это сетка 10х10. умножение и деление на 10 положения элемента - это просто чтобы избавиться от остатков, а -10 - чтобы подогнать его к контейнеру. Например, предположим, что ваша точка слева 33px. 33 / 10,0 = 3,33 Математическое окружение (3,33) = 3,0 3 * 10,0 = 30. В конце ваше новое местоположение будет 30 вместо 33.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#draggable { width: 100px; height: 70px; background: silver; }
</style>
<script>
$(document).ready(function() {
// $("#draggable").draggable({ grid: [10, 10] });
$("#draggable").draggable();
$("#draggable").draggable({
stop: function(event, ui) {
var left = ui.position.left;
var top = ui.position.top;
left = left - left % 10;
top = top - top % 10;
$("#draggable").offset({left:left,top:top});
console.log($("#draggable").position());
}
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="draggable">Drag me</div>
</body>
Это работает для привязки к сетке, когда она выпущена, но я бы предпочел, чтобы она привязывалась к пользовательской сетке, пока пользователь все еще перетаскивает объект, что я не знаю, как реализовать.
penguinrob
Похожие вопросы
Была такая же проблема - решение здесь:<a href="http://stackoverflow.com/a/20712561/165673">stackoverflow.com/a/20712561/165673</a>
