How can I set a "delimiter" area for my javascript draggable object?

Question

Hello! I have an object with drag function in adobe edge Animate and would like to know how it is possible to define an area where it is possible to drag the object. grateful

Answer 1

If you modify the drag function: Before you update the position of the "draggable" object you just need to check if:

• 1. X will be greater than or equal to X of X of the area;
• 2. the X + width will be smaller than the X of the area + the width of the area;
• 3. the Y will be greater than or equal to the Y of the area;
• 2. the Y + height will be less than the Y of the area + the height of the area;

If not, the position of the object is not updated. Where you update the position of the object when dragged you do something like this:

if(obj.x >= limit.x && obj.x + obj.width <= limit.x + limit.width
obj.y >= limit.y && obj.y <= limit.y + obj.height ) {
    // Deve ser provavelmente assim que você atualiza a posição?
    obj.x = e.clientX;
    obj.y = e.clientY;
}
// `limit` seria algo como {x: 10, y: 10, width: 200, height: 200}
// O limit pode ser declarado de forma que possa ser usado.
// var limit = {x: 10, y: 10, width: 200, height: 200};

But it seems that you are using jQuery and the drag function (in your case) is inside. I don’t know jQuery very well. Maybe trying to update the Y of the object every time the mouse pointer moves can be functional if the Y is updated after the object is dragged.

sym.$('car2').mousemove(function() {
    $(this).css({'top': y});
});