Question

我有一个可以拖放并可以按预期工作的HTML代码-我对如何将其拖动回其原始位置感到困惑。这是HTML代码

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");
  ev.target.appendChild(document.getElementById(data));
}

#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

<p>Drag the image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">

Answer 1

在起点处添加另一个放置点，并将其放入其中。

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");
  ev.target.appendChild(document.getElementById(data));
}

#div1 {
  border: 1px solid #aaaaaa;
}
.drop-spot {
  width: 350px;
  height: 70px;
  padding: 10px;
}

<p>Drag the image into the rectangle:</p>

<div id="div1" class="drop-spot"  ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="drop-spot"  ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69"></div>

Answer 2

也许只是再增加一个方块？

---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
/usr/local/lib/python3.6/dist-packages/tensorflow/python/data/util/structure.py in normalize_element(element)
     92       try:
---> 93         spec = type_spec_from_value(t, use_fallback=False)
     94       except TypeError:

10 frames
TypeError: Could not build a TypeSpec for 13000       doesnt know how to pimp out here Twitter page.
13001     just a question.. are you guys liek famous or...
13002     thats pretty bad quality and probably the wor...
13003    **** it. Totally gutted I decided not to go ou...
13004     You're not here. I hope you're still resting....
                               ...                        
19995     yep trying to beat the cold winter. Morning s...
19996             have a good day girl, ill call you later
19997     Forget completely abt uploading the assignemt...
19998     yeah I've been there, my son is two so we go ...
19999     when nina picked up my call lastnight i didnt...
Name: text, Length: 7000, dtype: object with type Series

During handling of the above exception, another exception occurred:

ValueError                                Traceback (most recent call last)
/usr/local/lib/python3.6/dist-packages/tensorflow/python/framework/constant_op.py in convert_to_eager_tensor(value, ctx, dtype)
     94       dtype = dtypes.as_dtype(dtype).as_datatype_enum
     95   ctx.ensure_initialized()
---> 96   return ops.EagerTensor(value, ctx.device_name, dtype)
     97 
     98 

ValueError: Failed to convert a NumPy array to a Tensor (Unsupported object type float).

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");
  ev.target.appendChild(document.getElementById(data));
}

.div-to-drag {
  width: 350px;
  height: 70px;
  margin-top: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

Answer 3

您可以将此链接用作参考-https://www.w3schools.com/html/html5_draganddrop.asp

         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");
           ev.target.appendChild(document.getElementById(data));
         }

         #div1, #div2  {
         width: 350px;
         height: 70px;
         padding: 10px;
         border: 1px solid #aaaaaa;
         }

      <h2>Drag and Drop</h2>
      <p>Drag the image back and forth between the two div elements.</p>
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
         <img id="drag1" src="https://d2elkgkdx2cp5d.cloudfront.net/assets/hubstaff/logos/HS_text_logo_black-18504e00c286dca13b2c503b94d1eabdf6e1c45257ca558b78095c4e184a020c.svg" draggable="true" ondragstart="drag(event)" width="336" height="69">
      </div>
      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
      </div>

拖放-无法将拖放到原始位置

3 个答案: