jQuery UI Sortable Reorderable DnD List - custom bindings for Knockout

[Ivan Zlatev]

Hi,

I've created a custom Knockout JS binding for jQuery UI Sortables
( http://jqueryui.com/demos/sortable/ ), which keeps a Knockout
observableArray in sync when items are dragged and dropped around.

* Live Sample at: http://ivanz.github.com/knockout.jQueryUI-sortable.js
* Source Code at: https://github.com/ivanz/knockout.jQueryUI-sortable.js

Basic usage is to use a "sortableList" binding on the UL which you
want to make a jQuery Sortable and then a "sortableItem" binding for
each sortable item (LI) in the list like that:

<ul data-bind="sortableList: yourObservableArray" >
{{each(i, arrayItem) yourObservableArray" }}
<li data-bind="sortableItem: arrayItem"></li>
{{/each}}
</ul>

Decided to share in case it's useful to someone!

Ivan Zlatev

http://twitter.com/ivanzlatev
http://ivanz.com

[Mark Bradley]

awesome work.

I was going to look for something like this to for the todos example I
posted a while ago, but this is so easy it almost feels like cheating.

Heres the relevant commit:
https://github.com/barkmadley/barkmadley.github.com/commit/8dc11366499cddf1dba2aba81dd7322130ab170e#things/todos-obtrusive.html

try it here:
http://barkmadley.com/things/todos-obtrusive.html

>
> Ivan Zlatev
>
> http://twitter.com/ivanzlatev
> http://ivanz.com
>
>
>

--
-barkmadley
sent from an internet enabled device
http://barkmadley.com