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

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

• X will be greater than or equal to the X of the X in the area;
• the X + width will be less than the X of the area + the width of the area;
• Y will be greater than or equal to the area Y's Y;
• 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 looks like you're using jQuery and the drag function of the object (in your case) is inside. I do not know jQuery very well. Perhaps trying to update the object's Y every time the mouse pointer moves may be functional if Y is updated after the object is dragged.

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