JSFiddle - React, Tailwind, and code Playground

by Yahiko

HTML

<body>Porte
    <table>
        <tr>
            <td></td>
            <td>
                <div class="objects" id="Amulette1" style="border: 2px solid black;">
                     <h5>Amulette</h5>

                    <div id="Amulette" class="image-object" ondrop="drop(event)" ondragover="allowDrop(event)" ondragenter="drag_enter(event)" ondragleave="drag_out(event)"></div>
                </div>
            </td>
            <td>
                <div class="objects" id="Collier1" style="border: 2px solid black;">
                     <h5>Collier</h5>

                    <div id="Collier" class="image-object"></div>
                </div>
            </td>
        </tr>
    </table>Sac
    <table>
        <tr>
            <td>
                <div class="objects" style="border: 2px solid black;" id="sac0">
                    	<h5>0</h5>

                    <div class="image-object">
                        <div draggable="true" ondragstart="dragstart(event)" id="109824_">	<a onclick="window.open('http://URL/php/obj.php?obj=109824&amp;src=fiche','Glad','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=1, copyhistory=0, menuBar=0, width=450, height=600');return(false);" href="#">								
							<img src="http://URL/IMAGES/obj/anneau_3.jpg" 
								width="80" height="60"
								alt=".."
							/>
						</a>

                            <p class="nomobj">Bague</p>
                        </div>
                    </div>
                </div>
            </td>
            <td>
                <div class="objects" style="border: 2px solid black;" id="sac1">
                    	<h5>1</h5>

                    <div class="image-object">
                        <div draggable="true" ondragstart="dragstart(event)" id="179638_">	<a onclick="window.open('http://URL/php/obj.php?obj=179638&amp;src=fiche','Glad','toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=1, copyhistory=0, menuBar=0, width=450,...

CSS

.nomobj {
    margin: auto;
}

JavaScript

function allowDrop(ev) {
	    ev.preventDefault();
	    document.getElementById('Amulette').style = "border: 1px solid green";

	}

	function drag_enter(ev) {
	    document.getElementById('Amulette').style = "border: 1px solid yellow";
	}

	function drag_out(ev) {
	    document.getElementById('Amulette').style = "border: 1px solid pink";
	}

	function dragstart(ev) {
	    //alert("start"+ev.target.id);
	    //TODO spleet et condition sur la destination
	    //faire le allow drp via la contition
	    //CF attachEvent document.getElementById('Amulette').attachEvent("ondrop",drop(event) )
	    ev.dataTransfer.setData("test/plain", ev.target.id);
	    document.getElementById('Amulette').style = "border: 1px solid blue";
	    var collier = document.getElementById("Collier");
	    if (collier.addEventListener) {
	        collier.addEventListener("ondrop", drop);
	        collier.addEventListener("ondragover", allowDrop);
	        collier.addEventListener("ondragenter", drag_enter);
	        collier.addEventListener("ondragleave", drag_out);
	    }
	    ev.dataTransfer.dropEffect = 'move';
	    //document.getElementById('Collier').style ="border: 1px solid blue";

	}

	function drop(ev) {
	    ev.preventDefault();
	    document.getElementById('Amulette').style = "border: 1px dashed #2C2C2C;";
	    var data = ev.dataTransfer.getData("test/plain");
	    //this.appendChild(document.getElementById(data));
	    ev.target.appendChild(document.getElementById(data));
	    // ok id de l'objet dans data 
	    alert(data);
	    //Faire le diseable de la zone
	    //document.getElementById('Amulette').removeAttribute("draggable");
	}