Drag and drop

Drag and drop

by Horus Medya

HTML

<div class="building-blocks">

  <ul id="sortable1" class="drag-list">
    <li class="ui-state-default">Text</li>
    <li class="ui-state-default">Date</li>
    <li class="ui-state-default">Link</li>
    <li class="ui-state-default">Image</li>
    <li class="ui-state-default">Number</li>
  </ul>

</div>

<div class="droparea">

  <div id="accordion"></div>

</div>

CSS

div.building-blocks {
  width: 270px;
  height: 539px;
}

div.droparea {
  height: 800px;
  left: 50%;
  position: absolute;
  top: 10%;
  width: 500px;
  border: 2px solid grey;
}

ul.drag-list {
  position: relative;
  cursor: move;
}


/*ul.drop-list {
    border: 2px solid grey;
    height: 600px;
}*/

li {
  height: 30px;
  list-style: none;
  margin-bottom: 5px;
  text-align: center;
}

JavaScript

$(document).ready(function() {



  $(".drag-list li").draggable({
    helper: "clone"
  });

  $(".droparea").droppable({
    drop: function(event, ui) {
      addCategory(ui.draggable.html());
      $("#accordion").accordion({
        collapsible: true,
        header: 'h3'
      });
    }
  });
});

Category = function(item) {
  var category = $("<h3><a href='#'>" + item + "</a></h3> \
                    <div> \
                        <p>hello I am accordion</p> \
                    </div>");

  return category;
}

function addCategory(item) {
  var category = Category(item);
  $('#accordion').append(category);
}