How to add drag and drop selection box in your blogger post in 5 minutes

Back>
Example

paste the following code into your post's HTML tab

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"></link>

<script src="https://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

<style>
#div1, #div2 {
    width: 350px;
    height: 140px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

.box-item {
 width: 100%;
 z-index: 1000
}
</style>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

function checkAnswer() {
    var a = document.getElementById("div1").innerHTML;
    alert(a);
}

$(document).ready(function() {
  $('#answer').click(function() {
    var ids = [];
    $('#div1').find('div').each(function () {
      ids.push($(this).attr('itemid'));
    });
    alert(ids.sort());
  });
});
</script>


<br />
Drag the implementing classes into the interfaces:<br />

Panel 1
<div id="div1" ondragover="allowDrop(event)" ondrop="drop(event)">
<div draggable="true" height="69" id="drag1" itemid="item-1" ondragstart="drag(event)" width="336" class="btn btn-default box-item">
TreeSet</div>
<div draggable="true" height="69" id="drag2" itemid="item-2" ondragstart="drag(event)" width="336" class="btn btn-default box-item">
ArrayList</div>
<div draggable="true" height="69" id="drag3" itemid="item-3" ondragstart="drag(event)" width="336" class="btn btn-default box-item">
ConcurrentHashSet</div>
</div>

<br />
Panel 2
<div id="div2" ondragover="allowDrop(event)" ondrop="drop(event)">
</div>
<br />

<div draggable="true" height="69" id="drag3" itemid="item-3" ondragstart="drag(event)" width="336">
ConcurrentHashSet</div>
<button id="answers" onclick="checkAnswer()">innerHTML of Panel 1</button>

<button id="answer">Items you have selected in Panel 1</button>