# Using jQuery breaks stache livebinding

**URL:** <https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559>\
**Category:** CanJS\
**Created:** [February 20, 2017, 11:13am UTC](https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559 "2017-02-20T11:13:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pestdoktor](https://avatars.discourse-cdn.com/v4/letter/p/b38774/32.png) [@Pestdoktor](https://forums.bitovi.com/u/Pestdoktor)\
**Post date:** [February 20, 2017, 11:13am UTC](https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559/1 "2017-02-20T11:13:31Z")

</div>

I recently discovered this project in my search for an MVC Framework and am currently experimenting with the alpha3.

So far I’m loving it, but trying to use a jquery-ui widget I noticed that when I manipulate the dom using jquery directly, it breaks stache livebinding accross the app.

Is there any way to call for example `$(this.element).draggable()` and still retain the `{{foo}}` livebinding?

---

<div class="post-metadata">

**Author:** ![chasen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/chasen/32/402_2.png) [@chasen](https://forums.bitovi.com/u/chasen)\
**Post date:** [February 21, 2017, 5:51pm UTC](https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559/2 "2017-02-21T17:51:16Z")

</div>

This sounds like a bug. Any chance you have the code publicly hosted (e.g. GitHub) or can you reproduce this issue in a JS Bin?

Here’s a starter JS Bin with CanJS 3: [http://jsbin.com/safigic/7/edit?html,js,output](http://jsbin.com/safigic/7/edit?html,js,output)

Also, I haven’t used jQuery UI’s draggable features before but jQuery++ has definitely worked for me: [http://jquerypp.com/#drag](http://jquerypp.com/#drag)

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [February 21, 2017, 7:25pm UTC](https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559/3 "2017-02-21T19:25:21Z")

</div>

Does `.draggable` mutate the DOM? If it does, it will kill the bindings on any DOM it mutates. There’s little we can do to fix this. If you create an example, I can show you how to work around it.

---

<div class="post-metadata">

**Author:** ![Bajix](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@Bajix](https://forums.bitovi.com/u/Bajix)\
**Post date:** [February 21, 2017, 11:02pm UTC](https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559/4 "2017-02-21T23:02:49Z")

</div>

Modify the state instead of the DOM. Using drag.ghost() during `draginit` makes this easier, as it would prevent any side-effects applied by draggable.

If you use something like Velocity to do the animations, you can use { duration: 0, queue: false } to apply translates smoothly during dragging, and then add a duration otherwise, thus allowing a single event on a translate state to facilitate many animation use cases (draggable, snappable, resettable, etc).

At a high level, you want event streams that mutate state, and state changes that update DOM.

---

<div class="post-metadata">

**Author:** ![Pestdoktor](https://avatars.discourse-cdn.com/v4/letter/p/b38774/32.png) [@Pestdoktor](https://forums.bitovi.com/u/Pestdoktor)\
**Post date:** [February 24, 2017, 4:46pm UTC](https://forums.bitovi.com/t/using-jquery-breaks-stache-livebinding/559/5 "2017-02-24T16:46:28Z")

</div>

Thanks for getting back to me, was a busy week so I couldn’t follow up.

I ended up using can/stache to implement the draggable behaviour, wich was really straight forward.

I’ll try to compose a few JSBins for this and other things I noticed this weekend, I’ll be back 🙂