9

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 bindings to update. Here is the revised code where I attempted this:

didInsertElement: ->
  @_super()
  @$().draggable
    cursor: 'hand'
    helper: 'clone'
    opacity: 0.75
    scope: @draggableScope
    start: ->
      Ember.beginPropertyChanges()
    stop: ->
      Ember.endPropertyChanges()
  @$().droppable
    activeClass: 'dropActive'
    hoverClass: 'dropHover'
    drop: @createMatch
    scope: @droppableScope

Any help would be greatly appreciated.

ghempton
  • 7,777
  • 7
  • 48
  • 53

2 Answers2

9

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()
ghempton
  • 7,777
  • 7
  • 48
  • 53
  • So how do you re-enable binding afterward? Or did you not care about that? – Roy Daniels Jan 10 '12 at 03:05
  • the binding is only disabled in the cloned element used for the drag helper. The original element remains intact – ghempton Jan 10 '12 at 03:16
  • Ahh got ya. Well I can't think of anything built in to do what you're trying to do then. What you have looks like a clean solution to me. – Roy Daniels Jan 10 '12 at 03:24
  • I might look into metamorph if it provides another way later on, but right now this is what I can go with. Thanks – parapet Feb 15 '12 at 10:38
  • "helper" can also be a function... so instead of stripping everything out of a clone that jQueryUI made for you, you could build your own helper element. this worked well for me – Nicholas Franceschina Apr 16 '12 at 13:56
  • I posted on your blog as well, but here's a working jsfiddle sortable demo in Ember 0.9.6 http://jsfiddle.net/chrisconley/tHvaf/ where I had to add `clone.removeClass('ember-view');` in `safeClone()`. Thanks! – Chris Conley Apr 17 '12 at 11:51
  • Just realized my previously jsfiddle was in Ember 0.9.5: http://jsfiddle.net/chrisconley/tHvaf/. Updating to Ember 0.9.6 breaks Jquery UI Sortable with the safeClone() helper: http://jsfiddle.net/chrisconley/NamCK/. – Chris Conley Apr 22 '12 at 15:23
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()
EasyCo
  • 2,036
  • 20
  • 39