jquery draggable how to limit the draggable area

Question

I have a draggable object  div   and some droppable ones  table TD s   I want the user to drag my draggable object to one of those droppable TD s   I enable draggable and droppable this way       draggable   draggable        droppable   droppable      The problem is that with this the user can drag the div anywhere on the screen  including out of the droppable area   How can I limit the boundary area for the draggable object

User · Answer

function          draggable    draggable   containment   window            of this code does not display  Full code and Demo  http   www limitsizbilgi com div-tasima-surukle-birak-div-drag-and-drop-jquery html  In order to limit the element inside its parent        draggable    draggable   containment   window

User · Answer

See excerpt from official documentation for containment option      containment      Default  false        Constrains dragging to within the bounds of the specified   element or region    Multiple types supported          Selector  The draggable element will be contained to the bounding box of the first element found by the selector  If no element is found  no containment will be set     Element  The draggable element will be contained to the bounding box of this element    String  Possible values   parent    document    window      Array  An array defining a bounding box in the form   x1  y1  x2  y2              Code examples    Initialize the draggable with the containment option specified              selector    draggable       containment   parent              Get or set the containment option  after initialization      Getter var containment        selector    draggable   option    containment        Setter      selector    draggable   option    containment    parent

User · Answer

function               droppable-area    sortable                   connectWith    connected-sortable                   containment    droppable-area      parent div                  stack    connected-sortable div                 disableSelection

User · Answer

Use the  containment  option   jQuery UI API - Draggable Widget - containment  The documentation says it only accepts the values   parent    document    window    x1  y1  x2  y2  but I seem to remember it will accept a selector such as   container  too

User · Answer

Here is a code example to follow   thumbnail is a DIV parent of the  handle DIV  buildDraggable   function              handle    draggable       containment    thumbnail       drag  function event            var top     this  position   top          var left     this  position   left           ICZoom panImage top  left

[jquery] jquery draggable: how to limit the draggable area?

Examples related to jquery

Examples related to draggable