2

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?

Sherlock
  • 7,525
  • 6
  • 38
  • 79

1 Answers1

9

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

Royce Feng
  • 1,663
  • 1
  • 10
  • 6
  • 1
    One other way is you can set `ko.bindingHandlers.sortable.allowDrop = false;` globally or pass `allowDrop` in the binding. This will prevent it from being a target for anyone to drop to (you can still sort within). It would have the same affect as `connectClass: false`. – RP Niemeyer Sep 13 '12 at 18:49
  • Unfortunately, I haven't had luck with either solution. I would like to go for the containment option, but I'm not sure what I should replace 'parent' with. I tried the id and class name of the element I wanna bind it to, but I can still drag it in any other 'drop zone'. What am I missing here? – Sherlock Sep 14 '12 at 06:06
  • According to the documentation, you should be able to pass in a selector, e.x. "#id" or ".sortable". You can probably also pass in `this`. – Royce Feng Sep 14 '12 at 06:16