Вопрос по javascript, jquery, jquery-ui – jQuery Перетаскиваемая пользовательская привязка к сетке

3

Я использую jQuery UI Draggable в проекте. У меня есть флажок, который включает параметр сетки (10x10 сетки) на перетаскиваемых объектах.

Однако при повторном включении сетки объекты, которые были перемещены, когда сетка была отключена, не совпадают с объектами, которые не были перемещены при выключении сетки. Короче говоря, объекты находятся на отдельных сетках, которые не выстраиваются в линию.

Поэтому я хотел бы, чтобы объекты привязывались с шагом 10 (пока пользователь их перетаскивает, а не просто щелкает при отпускании), чтобы объекты всегда выстраивались в линию при включении сетки, но мне кажется, что выяснить, как реализовать это в jQuery UI. Есть идеи?

Была такая же проблема - решение здесь:stackoverflow.com/a/20712561/165673 Yarin

Ваш Ответ

2   ответа
0

<!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.
Пожалуйста, добавьте это объяснение в ваш ответ, спасибо.
Да, есть объяснение. добавив сейчас.
ну какое объяснение вашему ответу ??
1
<!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

Похожие вопросы