Restrict nested container in jQuery Sortable

Question

i am working on an UI which will use this jquery sortable script ( http://johnny.github.io/jquery-sortable/ ). I want to have a nested list, where i can only drag specific items into. Here is an example:

This is the nested list. What i do want do prevent is, that i can Drag

Second

Third

into the nested list.

$("ol.example").sortable({
    isValidTarget: function($item, container){
    // Here should be some kind to restrict the nested list
    }
});

I can initialize the sortable-list and configure possible actions with the isValidTarget: Option

 $("ol.example").sortable({ isValidTarget: function($item, container){ // Here should be some kind to restrict the nested list } }); 

I couldn't get it to work, because i don't know how to ask if the target is the nested list. Does anybody have an idea? Maybe its an easy question, but i'm pretty new to JavaScript.

Best regards

Answer 1

The container has the target element as a property ( container.el ) which contains the jQuery element of the currently targeted container. You can use jQuery methods on that to determine if it's a valid target. I think the following is what you're trying to do.

 $("ol.example").sortable({ isValidTarget: function($item, container) { if (container.el.hasClass("nested1")) { return false; } else { return true; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script> <ol class="example"> <li>First <ol class="nested1"> <li>N1</li> <li>N2</li> <li>N2</li> </ol> </li> <li>Second</li> <li>Third</li> </ol>