Question

我想为“填补空白”样式问题创建“拖放”，然后通过HTML表单提交此数据。

示例： enter image description here

我已经看了几种方法，比如拖放图片 - 不是我想要的，或者dragging and dropping elements *在页面上，但我无法弄清楚我是如何将其转化为表格输入。

为W3学校提供道歉链接，我知道他们不喜欢这里

Answer 1

修改您链接的示例可以：

<!DOCTYPE HTML>

<html>
  <head>
    <style>
      .draggable {background-color:#00ff00;margin:5px;padding:3px;}
      #div1,#div2 {display:inline-block;min-width:25px;min-height:10px;border-style:solid;border-width:0px;border-bottom-width:2px;}
    </style>
    <script>
      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.parentNode.replaceChild(document.getElementById(data), ev.target);
        document.getElementById(data).className = "";
      }
    </script>
  </head>
  <body>
    <span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">drag</span>
    <span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">drop</span>
    <br />
    This is a sample 
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    and 
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    sentence.
  </body>
</html>

Here's a fiddle of it to play with.

HTML5拖放“填空”

1 个答案: