CODEWITHSUNDEEP
jqueryjquery-ui-draggable
Stefano Maglione
Stefano Maglione

Reputation: 4160

jquery draggable containment issue

I have a function draggable with containment options. The containment is locked on a div but the dragged element respects only two side of div contained(only the base of div and the right side) while on the top side the element dragged is not blocked to go beyond and on left side the element is blocked before to arrive at side.

This is the HTML:

<div id="containermy"> </div>
<div id="mapplane"><img src="templates/protostar/images/planeminiature.png" />

CSS:

.banner #containermy {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height:500px;
    width:500px;
    border:solid 1px yellow;
    position: absolute;
}

and my jQuery:

$('.mapban').parent().jclip(0, 0, 1060, 750);
$('#mapplane').draggable({ containment: $('#containermy'),scroll: false});

Upvotes: 0

Views: 2082

Answers (1)

Jason
Jason

Reputation: 1959

It looks like the the problem is that containment does not take a jQuery object. It only takes the values parent, document or window.

From http://api.jqueryui.com/draggable/#option-containment:

String: Possible values: "parent", "document", "window".

<div id="containermy">
  <img id="mapplane" src="http://www.strictlyphp.com/blog/wp-content/uploads/2009/07/icon_javascript.png" />
</div>

$('#mapplane').draggable(
{ 
    containment: "parent",
    scroll: false
});

#containermy {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  height:500px;
  width:500px;
  border:solid 1px yellow;
  position: absolute;
}

Demo http://jsfiddle.net/6szL4/

Upvotes: 1

Related Questions