J'ai trouvé ce code qui vous permet de glisser-déposer un élément dans une zone spécifique, mais je ne peux pas le réécrire pour permettre de glisser-déposer plusieurs éléments car je ne sais pas comment obtenir l'objet glisser du drop_handler identifiant de fonction.
let offsetX;
let offsetY;
onDragStart = function(ev) {
const rect = ev.target.getBoundingClientRect();
offsetX = ev.clientX - rect.x;
offsetY = ev.clientY - rect.y;
};
drop_handler = function(ev) {
ev.preventDefault();
const left = parseInt(id2.style.left);
const top = parseInt(id2.style.top);
id1.style.position = 'absolute';
id1.style.left = ev.clientX - left - offsetX + 'px';
id1.style.top = ev.clientY - top - offsetY + 'px';
id2.appendChild(document.getElementById("id1"));
};
dragover_handler = function(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
};
<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">拖动的Div</div> <div id="id2" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">放置的Div </div>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Utilisez cette variable dans
onDragStart中，“保存”dragElement。这样你就可以在drop_handlerpour déplacer des éléments.Je le suis
dropElement添加了一个constparce que ça ne changera pas.let offsetX; let offsetY; let dragElement = null; const dropElement = document.getElementById("id-drop"); onDragStart = function(ev) { const rect = ev.target.getBoundingClientRect(); offsetX = ev.clientX - rect.x; offsetY = ev.clientY - rect.y; dragElement = ev.target; }; drop_handler = function(ev) { ev.preventDefault(); const left = parseInt(dropElement.style.left); const top = parseInt(dropElement.style.top); dragElement.style.position = 'absolute'; dragElement.style.left = ev.clientX - left - offsetX + 'px'; dragElement.style.top = ev.clientY - top - offsetY + 'px'; dropElement.appendChild(dragElement); }; dragover_handler = function(ev) { ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; };