HTML5:Dragdrop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }
        .area{
            display: block;
            background-color: #999;
            width: 300px;
            height: 600px;
            margin: 30px;
        }

        .item{
            width: 100px;
            height: 100px;
            margin: 5px;
            background-color: cadetblue;
            text-align: center;
            line-height: 100px;
            float: left;
        }
    </style>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        var draggableObj = null;
        var handleDragStart = function(){
            draggableObj = this;
            console.log(draggableObj);
        }

        var handleDrop = function(e){
            e.preventDefault();

            if(!$(this).hasClass('start')){
                // move existing object to temp area
                $(this).children().appendTo('.temp');
            }

            // append new object to droppable area
            $(draggableObj).appendTo(this);

        }

        $(function(){
            // draggable
            var draggableItems = document.querySelectorAll('.item.draggable');
            for(item of draggableItems){
                item.addEventListener('dragstart', handleDragStart, false);
            }

            // droppable
            var droppableArea = document.querySelectorAll('.area.droppable');
            for(area of droppableArea){
                area.addEventListener('dragover', function(e){ e.preventDefault(); }, false);
                area.addEventListener('dragenter', function(e){ e.preventDefault(); }, false);
                area.addEventListener('drop', handleDrop, false);
            }
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="area droppable start">
            <div class="item draggable" draggable="true">1</div>
            <div class="item draggable" draggable="true">2</div>
            <div class="item draggable" draggable="true">3</div>
        </div>
        <div class="area droppable">
            <div class="item draggable" draggable="true">4</div>
        </div>
        <div class="area temp"></div>
    </div>
</body>
</html>