JSFiddle - React, Tailwind, and code Playground

by nilesh026

HTML

<div id="holder"></div>

JavaScript

$(document).ready(function () {
    $.ajax({
        type: "post",
        url: "/echo/html/",
        data: {
            html: ' <div id="2013_Holidays_.xlsx" class="up-img" draggable="true">   <img class="" width="70px" height="70px"/><span class="file-browse" data-ext="xlsx" data-id="2013_Holidays_.xlsx">2013_Holidays_...</span></div><div id="a91234567889ba.jpg" class="up-img" draggable="true"><img class="file-browse" width="70px" height="70px" src=""/><span class="file-browse" data-ext="jpg" data-id="a91234567889ba.jpg">a91234567889ba...</span></div><div id="aakanksha rajhansa.pdf" class="up-img" draggable="true">    <img width="70px" height="70px" onclick="show_info.call(this)"/><span class="file-browse" data-ext="pdf" data-id="aakanksha rajhansa.pdf">aakanksha rajh...</span></div>'
        },
        success: function (data) {
            $("#holder").html(data);
        }
    });
});


$('#holder').on('dragstart', '.up-img', function (e) {
	console.log(e);
	e.dataTransfer.effectAllowed = 'copy';
	//handleDragStart(e)
});

function handleDragStart(e) {
    console.log("drag");
	e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
	e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
    
}