Restrict dragging within a specific DIV only

Question

See JSFIddle: http://jsfiddle.net/6q9hn5Ln/2/

1. How do I restrict the dragging only within #OuterWrapper ?

2. Why can't I get a newline in the textarea by hitting ENTER?

   var x = 0, y = 0;

   interact('#outWrap_1') .draggable({ onmove: function (event) { x += event.dx; y += event.dy;

           event.target.style.webkitTransform =
           event.target.style.transform =
               'translate(' + x + 'px, ' + y + 'px)';
       }
   })
   .inertia(true)
   .restrict({
       drag: "#OuterWrapper", // how to restrict dragging to this DIV only
       endOnly: true
   });
   

Answer 1

Use containment

$( ".selector" ).draggable({ containment: "parent" });

check this jquery draggable: how to limit the draggable area?