javascript - 使拖放功能遍及所有网站，而不仅仅是特定的 div 部分

Question

我有一个允许将图像拖放到特定位置的脚本。但是我想让它能够在整个屏幕上拖放。不仅是 div 所在的位置。我该怎么做？我需要创建很多 div 还是什么？

我的脚本:

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;
}

还有我的 HTML:

<a href="#" id="suspect">
    <div class="image">
        <img id="drag1" src="images/suspect.png" width="160" height="140" alt="" draggable="true" ondragstart="drag(event)"/>  
    </div>
</a>

Answer 1

我解决了。你可以在这里查看:

脚本:

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
      $( function() {
        $( "#draggable3" ).draggable();
        $( "#droppable" ).droppable({
          drop: function( event, ui ) {
            $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
                .html( "Dropped!" );
          }
        });
      } );
      </script>

风格

<style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

HTML

<a href="#" id="suspect">
<div id="draggable3" class="image">
<img src="images/suspect.png" width="160" height="140" alt=""/>  
</div>
</a>