title: jquery-ui drag and drop across multiple divs with sort
body: <p>I'm trying to create a jquery drag and drop solution and am a little lost with how I achieve the following.</p>
  
  <ol>
  <li><p>Allow '.todo-task' to be dropped into any of the 4 'backlog, pending, inProgress, completed'  div containers.</p></li>
  <li><p>Use a highlight helper to show where the task will be placed in the container.</p></li>
  <li><p>Be able to drag and drop with in a container to change to order.</p></li>
  </ol>
  
  <p>my first issue is that I cannot seem to be able to activate the drag items correctly.</p>
  
  <p>I have created a <a href="http://jsfiddle.net/2bitcoder/h5rt2qgw/1/" rel="nofollow">jsfiddle</a> with the code I have so far.  Appreciate any guidance / help </p>
  
  <p>here is my jquery code</p>
  
  <pre><code> $(".task-container").contents().find(".todo-task").draggable({
      connectToSortable: ".ui-droppable",
      helper: function (event) {
  
      },
      iframeFix: true,
      // stop: makeSortable()
      stop: function (event, ui) {
        //  alert('stop');
      }
  });   
  
  $(".ui-droppable").sortable({
      placeholder: "ui-state-highlight",
      opacity: .5,
      //dropOnEmpty: true,
      helper: 'original',
      beforeStop: function (event, ui) {
       newItem = ui.item;
      },
      receive: function (event, ui) {
  
      },
  
  }).disableSelection().droppable({
      over: ".ui-droppable",
      activeClass: 'highlight',
      drop: function (event, ui) {
          $(this).addClass("ui-state-highlight");
  
      }
  })
  </code></pre>