Can't get jQuery UI drag helper to change

manpreet Best Answer 3 years ago

I'm trying to have a .draggable() object's helper change according to where it is on the screen. To do it, I'm using the helper's set function, with the value being HTML generated from a separate template. By using console.log() statements to see what the helper is, I can see that the HTML has changed appropriately (at least I'm fairly certain), but the helper itself is not changing on-screen. For some context, this is CoffeeScript in a Backbone.js view. Here's my code:

$('#syllabus').droppable({
  scope: "components",
  over: (event, ui) ->
    $('#new_plaintext_button').draggable("option", "helper", $(JST["backbone/templates/components/box"]()))
  out: ->
    $('#new_plaintext_button').draggable("option", "helper", "clone")
})

To clarify, the helper starts out as a clone, and when I hover over the object with the correct scope, it should change to the new HTML object from the template. When I leave the scope, it should return to the clone. Here's the jQuery object for the helper before I change it and after:

[i.fa.fa-3x.fa-file-text-o.ui-draggable.ui-draggable-handle.ui-draggable-dragging, prevObject: jQuery.fn.jQuery.init[1], context: i#new_plaintext_button.fa.fa-3x.fa-file-text-o.ui-draggable.ui-draggable-handle, constructor: function, init: function, selector: ""…]
[div#component_box, prevObject: jQuery.fn.jQuery.init[1], context: document, constructor: function, init: function, selector: ""…]

And as a final note, I've styled this new div in CSS with visible features, so I know it's not the case that my div is just empty so I can't see it. If anyone has any idea why this isn't working, I'd really appreciate it. Thanks.

manpreet 3 years ago