Prevent items to be 'droppable' in other (parent/child) elements

问题:

I use knockout-sortable.js to let the user drag and drop items to give them a different order, but I'm experiencing problems when I have multiple 'drop zones' on my page. I have nested sets, all of which are sortable, but not interchangeable.

My code:

    <div class="sortable" data-bind="sortable: blueprint.pages">           <tr><td>Blabla</td></tr>     </div> 

And at some other point:

    <div class="sortable" data-bind="sortable: selectedPage().page_sections">           <tr><td>Another blabla</td></tr>     </div> 

I can now just drag and drop 'Another blabla' into 'Blabla', causing errors. How can I prevent this from happening?

回答1:

There are a couple ways to go about this. The first is to pass in to knockout-sortable the connectClass as false or null (or anything that is equal to false when expressed as a boolean):

<div class="sortable" data-bind="sortable: { data: blueprint.pages, connectClass: false }">     <tr><td>Blabla</td></tr> </div>  <div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, connectClass: false }">       <tr><td>Another blabla</td></tr> </div> 

You can also pass, into jQuery, the containment option:

<div class="sortable" data-bind="sortable: { data: blueprint.pages, options: { containment: 'parent' } }">     <tr><td>Blabla</td></tr> </div>  <div class="sortable" data-bind="sortable: { data: selectedPage().page_sections, options: { containment: 'parent' } }">       <tr><td>Another blabla</td></tr> </div> 

This, unlike the first solution, will stop the item from visually leaving the box (if that's your desire).

文章来源: Prevent items to be 'droppable' in other (parent/child) elements