Murphy4 Murphy4 - 3 months ago 10
Javascript Question

How to select class elements within a relative parent inside draggable and droppable

I have a DOM that looks something like this:

<div class="wrapper">
<div class="droppable"/>
<div class="items-wrapper"/>

<div class="droppable"/>
<div class="items-wrapper">
<div class="draggable">
<div class="draggable">
</div>
<div class="droppable"/>
</div>

<div class="wrapper">
<div class="droppable"/>
<div class="items-wrapper"/>

<div class="droppable"/>
<div class="items-wrapper">
<div class="draggable">
<div class="draggable">
</div>
<div class="droppable"/>
</div>


In my javascript using JQuery, I want to set the "accept" selector of each droppable to get all the draggable items within the parent "wrapper" but it seems that inside the droppable options I lose access to $(this) making the following invalid.

$('.droppable').droppable({
accept: "$(this).closest('.wrapper').find('.file_item')",
});


I'm a bit of a novice so any help is appreciated.

Answer

droppable accept option can be a selector or function(). In your case use function.

 accept: function(ele) { 
    ele.closest('.wrapper').find('.file_item');
 }

link to documentaion

Also the function must return true if the draggable should be accepted.

Comments