Question

I am using jQuery UI with a rails application using backbone.js. I want to make a draggable element? Where do I have to put this function :

$('.area-tools').draggable({handle: ".grap-area", "containment" : "parent"})

Is it on the view? After the render function? Because, the initialize function doesn’t find my element, I think the DOM is not already created?

So, i did this :

class Myapp.Views.Tools extends Backbone.View
  template: JST['pdfs/tools']

  tagName: "div"

  className: "pdf-tools"

  events:
    'click div.rect' : 'drawRect'

  initialize: ->
    @previewWrapper = $('.preview')
    @count = 0;
    @

  render: ->
    $(@el).html(@template())

    @initColorPicker()

    this

  initColorPicker: ->
    $('.area-tools').draggable({handle: ".grap-area", "containment" : "parent"})


  drawRect: (event) =>
    newElement = $('<div id="resizable" class="resizable"><div class="close">x</div><input type="text" name="text_' + @count++ + '" /></div>');
    @previewWrapper.append(newElement);
    newElement.draggable().resizable();

Is it good? Any recommendation?

Answer 1

I just had the same issue come up when integrating the timeago plugin into my rails/backbone.js app.

My solution was almost the same as yours, except that instead of applying the plugin to the entire document, I apply it just to the view element. i.e. add a this before your selector:

initColorPicker: ->
  @.$('.area-tools').draggable({handle: ".grap-area", "containment" : "parent"})

That keeps the range of what you’re doing with the plugin confined to the specific view you call the plugin from, which is important.