Fun with knockout, knockout-sortable and JQuery UI dragables

[kai....@gmail.com]

Hi folks, 

I'm a bit unclear on how to integrate some parts of my UI with my viewmodel.

I've got a list that I want to allow the user to sort. Coupling that with my view model using knockout-sortable is straightforward. Now I want to allow users to drop new things into the sortable list from a draggable. I can get this to work in plain JQuery UI using something like http://jsfiddle.net/srBuJ/1/

Now, I'd like to add a new object to my ko.observableArray that the sortable is mapped to when the user drops the draggable onto the sortable. I've added a viewmodel at http://jsfiddle.net/fMLFk/3/, but the code is still missing the glue that creates a new FooItem or BarItem when the user drops a class "foo" or class "bar" droppable into the list.

Any ideas on how to get this done?

Cheers,

Kai

[rpn]

Here are a few samples that might help:

• Here is one using a "drag" binding and a new "receive" handler for sortable:  http://jsfiddle.net/rniemeyer/VEWFE/.  Currently, the dropped items do not participate in the beforeMove/afterMove callbacks.
• Here is an example of using sortables that contain a single item and prevent dropping:  http://jsfiddle.net/rniemeyer/Z3Jmw/
• Here is a basic drag/drop sample (no sorting):  http://jsfiddle.net/rniemeyer/78UCX/

Hope this helps.  I think that the sortable binding could do a better job of enabling these scenarios.  I think that some of the code from the first sample could be integrated into the library.

[cuh...@gmail.com]

http://jsfiddle.net/cuhuak/4CHDZ/ 

[Kai Blin]

On 2012-08-15 15:07, rpn wrote:

Hi,

> - Here is one using a "drag" binding and a new "receive" handler for

> sortable: http://jsfiddle.net/rniemeyer/VEWFE/. Currently, the dropped
> items do not participate in the beforeMove/afterMove callbacks.

> - Here is an example of using sortables that contain a single item and
> prevent dropping: http://jsfiddle.net/rniemeyer/Z3Jmw/
> - Here is a basic drag/drop sample (no sorting):
> http://jsfiddle.net/rniemeyer/78UCX/

On 2012-08-15 17:04, cuhual wrote:
> http://jsfiddle.net/cuhuak/4CHDZ/

Thanks for the examples. cuhuak's version pretty much does all I need,
and is nice and understandable. I think Ryan's first example is a bit
more elegant, as it doesn't require a global state. It does only create
multiple entries for every model student, however, which isn't quite
what I needed. So I've changed the logic so instead of providing the
object, I'm now providing the constructor, and then in the "receive"
handler I'm calling "new constructor()".

Again, thanks for the quick help.
Cheers,
Kai

--
Kai Blin
Worldforge developer http://www.worldforge.org/
Wine developer http://wiki.winehq.org/KaiBlin
Samba team member http://www.samba.org/samba/team/

[rpn]

The constructor idea would be a good way to go.  The example was a bit naive.  Good luck!