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 abl

Answer 1

I was having the same issue using Ember 1.0.0 RC6. I've found that just replacing the clone string with a function which returns the clone works fine.

  this.$().draggable({
    // helper: 'clone'
    helper: function() {
      return $(this).clone();
    }
  });

In Coffeescript

@$().draggable
    # helper: 'clone'
    helper: ->
        $(@).clone()

Answer 2

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()