I want to create elements that move 10px by dragging.

I want to create dragable elements using javascript (jQuery, etc.), but I don't know how to do it at all.

Using the jQuery UI, it is easy to create dragable elements, but what should I do if I want to:

Cannot move vertically
You can move 10px horizontally
Cannot exceed the specified range

Also, could you tell me that when you get close to the element A, it sticks to A and stops suddenly?

Also, where can I learn how the UI works?
I've only done certain moves so far, so I'm thinking of trying now.

javascript jquery jquery-ui

2022-09-30 18:16

1 Answers

I think the JQuery UI draggable will satisfy all the requirements.

$("#draggable").draggable({
  axis: "x", // Can't move vertically
  grid: [10,10], // Can move horizontally by 10px
  containment: "# container", // cannot exceed the specified range
  snap: "#anchor", // When approaching A element, it sticks to A and stops at a snap
  snapTolerance —50
});

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<divid="container" style="background-color:#ccc;width:400px;height:100px;">
  <divid="draggable" style="background-color:#000;color:#fff;float:left;">Dragme!</div>
  <divid="anchor" style="background-color:#f00;float:right">Snap to me!</div>
</div>

2022-09-30 18:16

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656