Question

在将box2拖到box1上时，我有两个div框box1，box2，删除了box1，删除了box2元素img。

我有一个ArrayImage，其图像值为1.jpg到10.jpg。我有一个arrayVariable，具有10个图像值1.jpg到10.jpg。

我有一个名为temparray的临时数组，用于存储随机选择的值的对应图像

我有一个tempimages.push(${ptags[i].textContent}.jpg);，它将对应的图像推送到temparray。

我想放置与所选随机值相同的图像，即如果box1选择了3和8

元素3.jpg和8.jpg应该放置在box2的img src中。

>

如何实现？

function rvalue() {
    var array = [];
    var tempimages = [];
    var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
    var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

    arrayLength = arrayVariable.length;

    ptags = document.getElementsByName("values");
    for (i = 0; i < ptags.length; i++) {
        ptags[i].innerHTML = arrayVariable[Math.floor(Math.random() * arrayLength)];
        array.push(ptags[i].textContent);
        tempimages.push(`${ptags[i].textContent}.jpg`); // want to display array to box002 to imgtag
    }
    console.log(array);
    console.log(tempimages);
}

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text", ev.target.id);
}


function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var el = document.getElementById(data);

    el.parentNode.removeChild; // deleting drag item

    ev.target.style.backgroundColor = 'initial'; //[value indicate which box element] bgcoclor none


    /* Added */
    var pParagraph = ev.target.firstElementChild;
    console.log(pParagraph);
    ev.target.removeChild(pParagraph);
   

    alert(el);
}

.box1 {
    background-color: coral;
    width: 50px;
    height: 50px;
    display: inline-block;
    border-radius: 5px;
    border: 2px solid #333;
    border-color: #e6e600;
    margin: -2px;
    border-radius: 10%;
    background-color: #66ff66;
    }
.box2 {
    float: left;
    width: 30px;
    height: 30px;
    background-color:#ffff00 2px;}
p {
    font: "Courier New",
    Courier,
    monospace;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
}

<body onload="rvalue()">
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
        <p name="values">name</p>
    </div>
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
        <p name="values">name2</p>
    </div>
    <div class="box1" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
        <p name="values">name3</p>
    </div>

    <div class="box2" draggable="true" ondragstart="drag(event)" id="2">
        <img src="" draggable="true" id="slide" style="width:100px; height:100px; border-radius: 50%;" border="rounded" />
    </div>

</body>

Answer 1

这不是一个超级完整的答案，目前没有时间做得更好，但这可能会给您一个开始的地方，解决了一些问题，确实可以解决问题，只是不是太好了。

var myapp = {};

function imgCreate(src, alt, title) {
  var img = document.createElement('img');
  img.src = src;
  img.draggable = "true";
  img.border = "rounded";
  if (alt != null) img.alt = alt;
  if (title != null) img.title = title;
  img.class = "slide";
  return img;
}

function rvalue() {
  var array = [];
  var tempimages = [];
  var arrayVariable = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg', '9.jpg', '10.jpg'];

  arrayLength = arrayVariable.length;

  ptags = document.getElementsByName("values");
  for (i = 0; i < ptags.length; i++) {
    let rv = Math.floor(Math.random() * arrayLength);
    ptags[i].innerHTML = arrayVariable[rv];
    array.push(ptags[i].textContent);
    tempimages.push(ptags[i].textContent.jpg); // want to display array to box002 to imgtag
    ptags[i].appendChild(imgCreate(ArrayOfImages[i], ArrayOfImages[i], ArrayOfImages[i] + " title"));
  }
  // console.log(array);
  // console.log(tempimages);
}

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  // var el = document.getElementById(data);
  // el.parentNode.removeChild; // deleting drag item
  console.log(data);

  ev.target.style.backgroundColor = 'lightblue'; //[value indicate which box element] bgcoclor none

  /* Added */
  // var pParagraph = ev.target.firstElementChild;
  // console.log(pParagraph);
  // ev.target.removeChild(pParagraph);
  // alert(el);
}

window.onload = function() {
  // console.log("loading");
  var ndbox = document.getElementsByClassName("box1");
  var ndval = document.getElementsByName("p");
  for (var i = 0; i < ndbox.length; i++) {
    ndbox[i].addEventListener("dragover", allowDrop, true);
    ndbox[i].addEventListener("drop", drop, true);
  }
  for (var i = 0; i < ndval.length; i++) {
    ndval[i].addEventListener("dragover", allowDrop);
    ndval[i].addEventListener("drop", allowDrop);
  }
}

.box1 {
  background-color: coral;
  width: 100px;
  height: 100px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
  border-radius: 10%;
  background-color: #66ff66;
}

.slide {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.box2 {
  float: left;
  width: 100px;
  height: 100px;
  float: left;
  clear: both;
  background-color: #ffff00;
  margin-top: 2px;
}

p {
  font: "Courier New", Courier, monospace;
  font-size: 20px;
  color: #FFFFFF;
  text-align: center;
}

<body onload="rvalue()">
  <div class="box1" id="10">
    <p name="values">name</p>
  </div>
  <div class="box1" id="11">
    <p name="values">name2</p>
  </div>
  <div class="box1" id="12">
    <p name="values">name3</p>
  </div>

  <div class="box2" draggable="true" ondragstart="drag(event)" id="2">
    <img src="1.jpg" alt="1.jpg" draggable="true" class="slide" border="rounded" />
  </div>

</body>

将图像从数组加载到javascript类中的img标签

1 个答案: