Set the draggable containment to an element relative to the current draggable object
Hope this makes sense. But I'm having trouble figuring how i can set
the containment property to an element relative to the current element
being set as draggable.
The idea here is to avoid repeating code.
I have this HTM:
<div class="items_drag_area">
<div class="contentBlock offeredItemsBlock"></div>
<div class="contentBlock userItemsBlock">
<div class="user_games">
<div class="user_item rounded_corners5">
And im currently experimenting with this js:
$(document).ready(function() {
$('.user_item').draggable({
revert: 'invalid',
zIndex: 2700,
helper: 'clone',
appendTo: '.items_drag_area',
containment: '.items_drag_area'
});
$('.offeredItemsBlock').droppable({
drop: function(event, ui) { alert($(ui.draggable).children
('.droppable_tradeItemId').val()); }
});
});
The thing here is I have two "items_drag_area" elements and the second
one is exactly like the first, but one draggable item inside
user_games should only be draggable to div offeredItemsBlock inside
the corresponding items_drag_area. So my first idea was passing a
jquery element, but something like containment: 'parent:parent' or
containment: $(this).parent().parent(). won't work.
So is there any way on how i can do this?