时间戳

首页 > 解决方案 > 每次单击按钮 JS 时创建一个图像

javascript - 每次单击按钮 JS 时创建一个图像

问题描述

每次单击按钮时，我都想创建一个图像，并且我需要能够拖动每个图像以将其移动到我想要的位置。目前，我的代码仅适用于一张图片。

我想我需要在 JS 中创建我的 div 但这不起作用..

const CreerPerso = document.getElementById('createPerso');

CreerPerso.onclick = CreationPersonnage;


async function CreationPersonnage() {
  /*var divImg = document.createElement('div');
  divImg.setAttribute("id", "imgPerso");
  document.getElementById('body').appendChild(divImg);*/
  document.getElementById("imgPerso").innerHTML = "<img src='images/circle.png' />";


  //drag images Personnage
  dragElement(document.getElementById("imgPerso"));

  function dragElement(elmnt) {
    var pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;
    if (document.getElementById(elmnt.id)) {
      // if present, the header is where you move the DIV from:
      document.getElementById(elmnt.id).onmousedown = dragMouseDown;
    } else {
      // otherwise, move the DIV from anywhere inside the DIV:
      elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
      e = e || window.event;
      e.preventDefault();
      // get the mouse cursor position at startup:
      pos3 = e.clientX;
      pos4 = e.clientY;
      document.onmouseup = closeDragElement;
      // call a function whenever the cursor moves:
      document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
      e = e || window.event;
      e.preventDefault();
      // calculate the new cursor position:
      pos1 = pos3 - e.clientX;
      pos2 = pos4 - e.clientY;
      pos3 = e.clientX;
      pos4 = e.clientY;
      // set the element's new position:
      elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
      elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
      // stop moving when mouse button is released:
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }
}
<body id="body">

  <button id="createPerso" class="btn btn-primary">Créer Personnage</button>
  <div id="imgPerso">

  </div>



</body>

标签： javascriptelectron

解决方案

  1. 不需要异步
  2. 无需为身体提供 ID
  3. 您传递元素，无需获取ID即可获取元素
  4. ID 必须是唯一的

这个比较简单

function dragElement(elmnt) {
  elmnt.dataset.pos1 = 0,
    elmnt.dataset.pos2 = 0,
    elmnt.dataset.pos3 = 0,
    elmnt.dataset.pos4 = 0;
  // if present, the header is where you move the DIV from:
  elmnt.addEventListener("mousedown", dragMouseDown);
}

function dragMouseDown(e) {
  e.preventDefault();
  const elemt = e.target;
  // get the mouse cursor position at startup:
  elemt.dataset.pos3 = e.clientX;
  elemt.dataset.pos4 = e.clientY;
}

function elementDrag(e) {
  e.preventDefault();
  const elemt = e.target;
  if (elemt) {
    // calculate the new cursor position:
    let pos1 = elemt.dataset.pos3 - elemt.clientX;
    let pos2 = elemt.dataset.pos4 - elemt.clientY;
    let = elemt.clientX;
    let = elemt.clientY;
    // set the element's new position:
    elemt.style.top = (elemt.offsetTop - pos2) + "px";
    elemt.style.left = (elemt.offsetLeft - pos1) + "px";
  }
}

function closeDragElement() {
  // stop moving when mouse button is released:
  document.onmouseup = null;
  document.onmousemove = null;
}

const CreerPerso = document.getElementById('createPerso');
const body = document.querySelector('body');
CreerPerso.addEventListener("click", CreationPersonnage);


function CreationPersonnage() {
  const divImg = document.createElement('div');
  divImg.classList.add("imgPerso");

  divImg.innerHTML = "<img src='images/circle.png' />";
  body.appendChild(divImg);

  //drag images Personnage
  dragElement(divImg);

}

document.addEventListener("mouseup", closeDragElement);
document.addEventListener("mousemove", elementDrag);
.imgPerso {
  position: absolute
}
<button id="createPerso" class="btn btn-primary">Créer Personnage</button>

推荐阅读