409N/A<h3>Setting Up the List</h3>

1N/A<p>First we need to create the HTML structure for the lists. Since `Sortable` uses `Y.DD.Delegate`, we need to set up the delegation containers (`#list1, #lists2`) and the list items (`li`).</p>

1N/A

1N/A```

1N/A{{>sortable-multi-source-fish-html}}

1N/A```

1N/A

1N/A<p>Now we give the lists some CSS to make them visible.</p>

1N/A

1N/A```

1N/A{{>sortable-multi-source-fish-css}}

1N/A```

1N/A

1N/A<h3>Setting Up the YUI Instance</h3>

1N/A<p>Now we need to create our YUI instance and tell it to load the `sortable` module.</p>

1N/A<p>In this example we are also going to attach a `DD` plugin to the `Sortable` instances.</p>

1N/A

1N/A```

1N/AYUI().use('dd-constrain', 'sortable'

1N/A```

1N/A

221N/A<h3>Making the Lists Draggable</h3>

1N/A<p>Now that we have a YUI instance with the `sortable` module, we need to instantiate a `Sortable` instance on each of the lists.</p>

1N/A

22N/A```

22N/A{{>sortable-multi-source-js-pre}}

0N/A{{>sortable-multi-source-js-post}}

0N/A```

221N/A

14N/A<h3>Applying a DD Plugin</h3>

14N/A<p>Since `Sortable` uses `DD.Delegate`, there is a dd instance available after instantiation.</p>

221N/A<p>The `DD.Delegate` reference is found on the `.delegate` property of the `Sortable`.

14N/AThis `DD.Delegate` instance has a `DD.Drag` instance bound to the `dd` property on the `DD.Delegate`

14N/A</p>

221N/A

14N/A```

14N/A{{>sortable-multi-source-js-connect}}

22N/A```

22N/A<p>Applying the `Plugin.DDConstrained` to the `Sortable` instance.</p>

22N/A

22N/A```

22N/A{{>sortable-multi-source-js-pre}}

22N/A{{>sortable-multi-source-js-connect}}

14N/A{{>sortable-multi-source-js-post}}

0N/A```

116N/A