3

I'm using jQuery UI Draggable in a project. I have a checkbox that toggles the grid (10x10 grid) option on the draggable objects.

However, when the grid is turned back on, objects that are moved when the grid was off don't line up with objects that were not moved when the grid was turned off. In short, the objects are on separate grids that do not line up.

So I'd like to have the objects snap to increments of 10 (while the user is dragging them, not just snap on release), so that objects will always line up when the grid is turned on, but I can't seem to figure out how to implement this in jQuery UI. Any ideas?

1

2 Answers 2

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: 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>
1
  • That works for snapping it to the grid when released, but I would prefer to have it snap to the custom grid while the user is still dragging the object, which is what I don't know how to implement.
    – penguinrob
    Commented Jun 20, 2012 at 14:47
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>

4
  • well, any explanation to your answer??
    – tod
    Commented Oct 22, 2018 at 23:31
  • Yes there is explanation. adding now. Commented Oct 23, 2018 at 23:19
  • You may add a stop function that would change the location of the top left point of the element to fit into a grid after releasing the dragable element. In this case it is a 10x10 grid. multiplying and dividing by 10 of the position of the element is just to get rid of the residuals and -10 is to fit it to the container. For example, assume your point is at 33px on the left. 33/10.0=3.33 Math.round(3.33) = 3.0 3*10.0=30. At the end your new location would be 30 instead of 33. Commented Oct 23, 2018 at 23:38
  • Please put this explanation into your answer, thanks.
    – tod
    Commented Oct 23, 2018 at 23:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.