Ember.js + jQuery UI Draggable Clone

Question

I am trying to use Ember.js in conjunction with jQuery UI's draggable functionality, but I am encountering problems. Specifically, when using the clone helper, I am not able to drop the element and everything is extremely laggy. If I don't use the clone helper, everything works as expected. I suspect this is related to jQuery UI cloning the html, including all of the metamorph script tags (used for binding). I don't need to update the element live while I am dragging it. Is there a way to strip binding tags with ember? For reference, here is the view logic: ``` didInsertElement: -> @_super() @$().draggable cursor: 'hand' helper: 'clone' opacity: 0.75 scope: @draggableScope @$().droppable activeClass: 'dropActive' hoverClass: 'dropHover' drop: @createMatch scope: @droppableScope ``` My first thought was to try and use a `beginPropertyChanges` and `endPropertyChanges` during the drag to prevent an unexpected behavior. This doesn't seem to work nor is it ideal as I would like other bindi…

Accepted Answer

I got this working by stripping all ember related metadata manually. Here is a small jquery plugin I whipped up:

```
# Small extension to create a clone of the element without
# metamorph binding tags and ember metadata

$.fn.extend
  safeClone: ->
    clone = $(@).clone()

# remove content bindings
    clone.find('script[id^=metamorph]').remove()

# remove attr bindings
    clone.find('*').each ->
      $this = $(@)
      $.each $this[0].attributes, (index, attr) ->
        return if attr.name.indexOf('data-bindattr') == -1
        $this.removeAttr(attr.name)

# remove ember IDs
    clone.find('[id^=ember]').removeAttr('id')
    clone
```

To get it to work, just set the helper as follow:

```
helper: ->
  $this.safeClone()
```

Ember.js + jQuery UI Draggable Clone

Solution

Problem