Set position of jquery draggable element while dragging

Question

In my web app, there is a draggable element. I need to set the left position of this element when the element reaches a certain limit while dragging. Using jQuery draggable widget, I have access to the position of the element:

function drag(e, ui) {
 console.log(ui.position.left);
}

Let say my left attribute is setted to 1100px, I need to set it to 500px and this, without stopping the dragging.

I have three functions: dragStart, drag, and gradEnd. Currently, I managed to get only one result: when setting ui.position.left = 500; on the drag function (using a condition), the left position is set to 500 but of course, the element is then stuck at 500px. The reason is that every time the drag function is triggered, the left position is setted to 500.

If the code runs only once the line ui.position.left = 500; the position left attribute is set to 500, but directly reset to 1100.

How can I set the left attribute once and for all?

 $("#divId").draggable({ drag: drag, }) function drag(e, ui) { if (ui.position.top > 50) { ui.position.left = 100; } }

 #divId { height: 70px; background-color: white; border: 4px solid #000000; text-align: center; color: black; cursor: grab; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="divId"> Bubble </div>

Answer 1

I am not sure how jQuery Draggable handles things under the hood, but even after setting ui.position.left = 100 , it does not register in the event until after dragging has stopped - that is why I opted to check the actual CSS property of the element that is being targeted.

I have also provided an example (closure/functional based) which demonstrates how to handle this without having to check CSS ..

---

---

First example:

 $("#divId").draggable({ drag: drag }); function drag(e, ui) { if (ui.position.top > 50) { $("#container").css('padding-left', '100px'); $(this).css('left', '0px'); } if (ui.position.left < 0) { ui.position.left = 0 } }

 #divId { height: 70px; background-color: white; border: 4px solid #000000; text-align: center; color: black; width: 300px; cursor: grab; } #container { height: 100vh; width: 1000px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="container"> <div id="divId"> Bubble </div> </div>

---

---

---

Second example, more of a 'closure based functional approach': does not require you to check CSS ..

 $("#divId").draggable({ drag: drag() }); function drag(e, ui) { let TRIGGER = false, TOP_THRESHOLD = 50, LEFT_POSITION = 100; return function(e, ui) { if (TRIGGER) { ui.position.left = LEFT_POSITION; } else if (ui.position.top > TOP_THRESHOLD) { TRIGGER = true; ui.position.left = LEFT_POSITION; } } }

 #divId { height: 70px; background-color: white; border: 4px solid #000000; text-align: center; color: black; cursor: grab; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="divId"> Bubble </div>

---

---