1

I need to return the element .draggable-box into the containment option, how can i achieve this?

var windowWidth = $(window).width();
var windowHeight = $(window).height();

$(".draggable-box").draggable({
    containment: [($(this).width() / 2), 50, windowWidth - 100, windowHeight - 200]
});

If I use $(this), window is returned...

Caio Kawasaki
  • 2,894
  • 6
  • 33
  • 69
  • 1
    Dont know if this would help http://stackoverflow.com/questions/5735270/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event-of – AmmarCSE May 28 '15 at 17:35

2 Answers2

2

If I use $(this), window is returned...

You need a reference to each .draggable element:

$(".draggable-box").each(function ( i, draggable ) {
  var $draggable = $(draggable);
  $draggable.draggable({
    containment: [($draggable.width() / 2), 50, windowWidth - 100, windowHeight - 200]
  });
});

Note that inside the each callback this will refer to the element (draggable in my example) so you could use this instead.

James Allardice
  • 164,175
  • 21
  • 332
  • 312
0

Store the draggable-box element in it's own variable. Try this:

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var $draggableBox = $(".draggable-box");

$draggableBox.draggable({
    containment: [($draggableBox.width() / 2), 50, windowWidth - 100, windowHeight - 200]
});
Danny Delott
  • 6,756
  • 3
  • 33
  • 57