$(".draggable").on({ dragstart: function(e) { $target = $(e.target); $target.addClass("dragging"); e.originalEvent.dataTransfer.setData("text", $target.text()); }, drag: function(e) { }, dragend: function(e) { $(e.target).removeClass("dragging"); } }); $(".basket").on({ dragenter: function(e) { $(e.target).addClass("dropping"); }, dragover: function(e) { e.originalEvent.addEventListener = "copy"; // "move", "link" return false; }, dragleave: function(e) { $(e.target).removeClass("dropping"); }, drop: function(e) { $(e.target).removeClass("dropping"); var $target = $(e.target); var dropText = "[" + e.originalEvent.dataTransfer.getData("text") + "]"; $target.text($target.text() + " " + dropText); } });

 .basket { margin-top: 30px; width: 500px; height: 100px; border: 1px solid gray; background: lightgray; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="draggable" id ="Banana" draggable="true">Banana</div> <div class="draggable" id ="Apple" draggable="true">Apple</div> <div class="draggable" id ="Potato" draggable="true">Potato</div> <div class="draggable" id ="Tomato" draggable="true">Tomato</div> <div class="basket"></div>