CODEWITHSUNDEEP
jqueryjquery-ui
EnglishAdam
EnglishAdam

Reputation: 1390

JqueryUI Draggable Containment: How to EXCLUDE an area or element

Imagine I have a draggable element (myLittleBrother) that is contained in the parent (ourHouse).

The draggable element can go everywhere EXCEPT in the space of a sibling element (myRoom).

How can I organise the jqueryUI to exclude an area inside the main containment area?

HTML

<div id="ourHouse"  >
    <div id="myLittleBrother"></div>
    <div  id="myRoom" ></div>
</div>

JS

$("#myLittleBrother").draggable({ 
        containment: "parent" BUT NOT myRoom...
});

Upvotes: 0

Views: 557

Answers (3)

Ben
Ben

Reputation: 55

In response to @jwags contribution the solution is quite simple. Apparently jquery at some point in time renamed "draggable" to "ui-draggable" and the error is simply, that this selector is not found. A search+replace for data("draggable") to data("ui-draggable") therefore solves this problem in the source code.

Upvotes: 0

EnglishAdam
EnglishAdam

Reputation: 1390

My final workable workaround (in my particular situation) was to supply the drag function with a redirect for any dragged elements that are taken there....

drag: function() {
  if (inside the element){
    Place outside via saved CSS properties;
  }
}

So the draggable element will enter the area, but can not be saved to stay there, as the values saved will always be from outside of the esclusion area. This is obvioulsy not useful to many who want to block actually entry and/or are not concerned about saved data properties but instead the onscreen look.

Also however.. I will not be bothering to find out where the dragged element came from, so it will get repositioned in a very strange way and moved to a random place.... Not pretty. So this I will not be accepting my own answer but offer it up as starting point for a hack.

Upvotes: 0

njwags
njwags

Reputation: 1147

The easiest way I know of to achieve this is going to be using an existing plugin. JQuery UI Draggable Collision seems like it works well. You will want to use the preventCollision option, keeping in mind that you need to keep siblings from starting out over lapping.

If you aren't interested in using a plugin, you could use the jQuery droppable widget and listen to the over event, then set a special value for the containment option to prevent dragging if the collision isn't allowed. But that would involve some heavy logic around dom operations.

Upvotes: 1

Related Questions