bobtail-dev/bobtail

Support JQuery.ui.sortable natively in reactive-coffee

Closed this issue · 6 comments

I am working on building a website around reactive-coffee, but a key part of the user interface is the ability to drag items within and between lists, a la:

http://jqueryui.com/sortable/#connect-lists

My naive attempts to integrate Jquery.ui with coffee script to do this didn't work.

On the meteor side, it seems that the way they implement reactivity causes conflict with drag events:

http://stackoverflow.com/questions/13214686/drag-and-drop-sortable-list-in-meteor
The short answer is: this isn't easy if you want it to be reactive. To make a non-reactive version, just wrap your template in a {{#constant}} tag and hook up the jquery-ui sortable in render as @bento suggested.

To make a reactive version, your sortable widget is going to have to deal with things changing under it (think about being mid-drag when data re-orders itself)

They appear to have done extra work inside meteor to make this work out of the box with query-ui:

https://github.com/meteor/meteor/tree/devel/examples/unfinished/reorderable-list

Any idea what it would take to make this work in reactive-coffee?

Just to let you know @drernie that I've seen this post, and while I'm not sure, and it may be a tall order, I'll kick it around when I get a chance. FYI I also follow Meteor, and thanks for those links as well.

yang commented

Hi @drernie, just so I understand - are you interested in encapsulating jQuery UI's Sortable list pair functionality within and using reactive-coffee? I whipped up a quick example of this here, which also features a reactively-updating list:

http://jsfiddle.net/yang/sb6rxhzz/

Note that this is using a pristine/non-forked jQuery UI - I'm not quite ready to head down the rabbit hole of maintaining a fork of jQuery UI for this, but it would be cool if jQuery UI were inherently better about handling DOM elements shifting underneath it while in the middle of a dragging operation.

Wow, is it that simple? Score one for reactive-coffee over meteor! I thought it would require some sort of patch on your side to pull it off. I'm not ready to fork JQuery-UI either. :-)

@yang - You're welcome to claim the bounty on this! https://www.bountysource.com/issues/4351558-support-jquery-ui-sortable-natively-in-reactive-coffee If you feel bad that it was too easy, you can always fix the SVG one too. :-)

yang commented

Wow, never heard of bountysource - super-interesting service. Thanks
@drernie! I'll try to look into the SVG one as well.

On Tue, Sep 16, 2014 at 11:01 AM, Dr. Ernie Prabhakar <
notifications@github.com> wrote:

@yang https://github.com/Yang - You're welcome to claim the bounty on
this!
https://www.bountysource.com/issues/4351558-support-jquery-ui-sortable-natively-in-reactive-coffee
If you feel bad that it was too easy, you can always fix the SVG one too.
:-)


Reply to this email directly or view it on GitHub
#55 (comment).

Nice snag of the bounty! @drernie, thanks for incentivizing a super-cool project!