title: JQuery Draggable Droppable and Sortable at the same time for DOM Manipulation
body: <p>I am trying to setup somme kind of drag and drop wysiwyg editor using JQuery UI.</p>
  
  <p>I have succesfully setup the elements but they have a strange behavior. </p>
  
  <p>It is almost impossible to sort items because of the constant flickering.</p>
  
  <p>i setup my draggables like this:</p>
  
  <pre><code>el.draggable({
      containement:'.main-form-container',
      revert: "invalid",
      connectToSortable: '.sortable'
  }).disableSelection();
  </code></pre>
  
  <p>If i dont set it as draggable the sortable will place the placeholder on itself! why?</p>
  
  <p>Sometimes when an element is dropped into another it becomes ONE draggable element and seem tobe glued together. though that seems fixed with overriding sortable update:</p>
  
  <pre><code>update: function (event, ui) {
          $(ui.item).css({
              position: 'relative',
              top:0,
              left:0,
              width: 'auto'
          });
  
          // init droppable draggable and sortable on this item
          setupDandD($(ui.item));
      }
  </code></pre>
  
  <p>and the setupDandD method:</p>
  
  <pre><code>setupDandD($('.form-container'));
  
      function setupDandD(el) {
          el.draggable({
              containement:'.main-form-container',
              revert: "invalid",
              connectToSortable: '.sortable'
          }).disableSelection();
  
          el.droppable({
              accept: '[data-section="toolbox"]',
              greedy: true,
              hoverClass: 'droppable-hovered',
              drop: handleDrop
          }).disableSelection();
  
          el.filter('.sortable').sortable({
              tolerance:'pointer',
              containement:'.main-form-container',
              connectWith: ".sortable:not(#" + $(this).id + ")",
              revert: 'invalid',
              helper: function () {
                  return $(this);
              },
              update: function (event, ui) {
                  console.log('here');
                  $(ui.item).css({
                      position: 'relative',
                      top:0,
                      left:0,
                      width: 'auto'
                  });
                  setupDandD($(ui.item));
              }
          }).disableSelection();
      };
  </code></pre>
  
  <p>I guess I need to pickup some event somewhere on the sortable but i am quite lost now...  </p>