How to apply jQueryUI plugin to a view?

Question

JavaScript

I'm trying to connect the plugin after the MarionetteJS show event, but onShow fires before the view is rendered to the DOM.

onShow: function () {
      $('.drag-el-container .col-div').draggable({
        containment: ".t-container",
        revert: true,
        revertDuration: 0,
        start: function () {
          $( this ).css({
            width: 180,
            height: 685,
            position: 'relative',
            background: '#f1f1f1'
          });
        },
        stop: function () {
          $( this ).css({
            width: 364,
            height: 60,
            position: 'relative',
            background: 'transparent'
          });
        }
      });
      $( ".cols-div" ).droppable({
        accept: ".col-div",
        tolerance: "pointer",
        over: function( event, ui ) {
          $( this ).addClass('hover');
        },
        out: function( event, ui ) {
          $( this ).removeClass('hover');
        },
        drop:function( event, ui ) {
          $( this ).append(ui.draggable);
          $( this ).removeClass('hover');
        }
      });
    }

Tell me how to apply the plugin after inserting the View into the DOM tree

Answer 1

Try using not $, but this.$when searching for a selector. In the second case, the search will be conducted inside this.$elthe view, which by the time the callback is called onShowhas not yet been inserted into the DOM, and then your selectors $( ".cols-div" ), $('.drag-el-container .col-div')do not work.