knockout.js - Evitar que los elementos sean ''droppable'' en otros elementos(padre/hijo)

knockout-sortable

Question

Utilizo knockout-sortable.js para permitir al usuario arrastrar y soltar elementos para darles un orden diferente, pero estoy teniendo problemas cuando tengo varias ''zonas de colocación'' en mi página. Tengo conjuntos anidados, todos los cuales son ordenables, pero no intercambiables.

Mi código:

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

Y en otro punto:

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

Ahora puedo simplemente arrastrar y soltar ''Another blabla'' en ''Blabla'', causando errores. ¿Cómo puedo evitar que esto suceda?

Answer 1

Hay un par de maneras de hacerlo. La primera es pasar a knockout-ordenable ConnectClass como falso o nulo (o cualquier cosa que sea igual a falso cuando se expresa como un booleano):

<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>

También puede pasar, en jQuery, la opción de contención:

<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>

Esto, a diferencia de la primera solución, impedirá que el artículo salga visualmente de la caja (si ese es su deseo).