title: How can I add drag and drop div with jquery?
body: <p>I would like to make html page like kanban template. There are Todo, Doing and Done column lists in html page. And an user can move div to another column list under this lists.  But I couldn't manage to drag and drop div components with jquery. Is there problem with javascript code or anything else? I will very pleased if give an idea. Thank you in advance.. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    var kanbanCol = $('.panel-body');
    kanbanCol.css('max-height', (window.innerHeight - 150) + 'px');
    var kanbanColCount = parseInt(kanbanCol.length);
    $('.container-fluid').css('min-width', (kanbanColCount * 350) + 'px');
  
    draggableInit();
  
    $('.panel-heading').click(function() {
      var $panelBody = $(this).parent().children('.panel-body');
      $panelBody.slideToggle();
    });
  });
  
  function draggableInit() {
    var sourceId;
    $('[draggable=true]').bind('dragstart', function(event) {
      sourceId = $(this).parent().attr('id');
      event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
    });
  
    $('.panel-body').bind('dragover', function(event) {
      event.preventDefault();
    });
  
    $('.panel-body').bind('drop', function(event) {
      var children = $(this).children();
      var targetId = children.attr('id');
  
      if (sourceId != targetId) {
        var elementId = event.originalEvent.dataTransfer.getData("text/plain");
  
        $('#processing-modal').modal('toggle'); //before post
  
        // Post data 
        setTimeout(function() {
          var element = document.getElementById(elementId);
          children.prepend(element);
          $('#processing-modal').modal('toggle'); // after post
        }, 1000);
      }
  
      event.preventDefault();
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div id="sortableKanbanBoards" class="row"&gt;
      &lt;div class="panel panel-primary kanban-col"&gt;
        &lt;div class="panel-heading"&gt;
          TODO
          &lt;i class="fa fa-2x fa-plus-circle pull-right"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;div id="TODO" class="kanban-centered"&gt;
            &lt;article class="kanban-entry grab" id="item1" draggable="true"&gt;
              &lt;div class="kanban-entry-inner"&gt;
                &lt;div class="kanban-label"&gt;
                  &lt;h2&gt;&lt;a href="#"&gt;Art Ramadani 1&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;Tolerably earnestly middleton extremely distrusts she boy now not.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/article&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-primary kanban-col"&gt;
        &lt;div class="panel-heading"&gt;
          DOING
          &lt;i class="fa fa-2x fa-plus-circle pull-right"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;div id="DOING" class="kanban-centered"&gt;
            &lt;article class="kanban-entry grab" id="item2" draggable="true"&gt;
              &lt;div class="kanban-entry-inner"&gt;
                &lt;div class="kanban-label"&gt;
                  &lt;h2&gt;&lt;a href="#"&gt;Art Ramadani 2&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;Tolerably earnestly middleton extremely distrusts she boy now not.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/article&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="panel panel-primary kanban-col"&gt;
        &lt;div class="panel-heading"&gt;
          DONE
          &lt;i class="fa fa-2x fa-plus-circle pull-right"&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class="panel-body"&gt;
          &lt;div id="DONE" class="kanban-centered"&gt;
            &lt;article class="kanban-entry grab" id="item3" draggable="true"&gt;
              &lt;div class="kanban-entry-inner"&gt;
                &lt;div class="kanban-label"&gt;
                  &lt;h2&gt;&lt;a href="#"&gt;Art Ramadani 3&lt;/a&gt;&lt;/h2&gt;
                  &lt;p&gt;Tolerably earnestly middleton extremely distrusts she boy now not.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/article&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
          &lt;div class="text-center"&gt;
            &lt;i class="fa fa-refresh fa-5x fa-spin"&gt;&lt;/i&gt;
            &lt;h4&gt;Processing...&lt;/h4&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>