Question

我在https://jsfiddle.net/42jg2kxq/15/处有以下代码，将绿色div放入更大的div中。 div现在已经拖延了，但不能掉进Chrome中更大的盒子里。看起来“drop”事件的事件函数永远不会运行。

JS

var dragImages = {
     'drop':function(){
          $('.dropbox').on('drop', function(ev) {
             ev.preventDefault();
             var data = ev.dataTransfer.getData("text");
             ev.target.appendChild(document.getElementById(data));
         });

         $('.dropbox').on('dragover', function(ev) {
             ev.preventDefault();
         });   
     },

     'drag':function(){
          $('.drag').on('dragstart', function(ev) {
              ev.dataTransfer.setData("text", ev.target.id);
          });
     }
};

dragImages.drag();
dragImages.drop();

HTML

<div id="box1" class="drag"  draggable="true">box 1</div>

<br/>

<div id="box2"  class="drag"  draggable="true"> box 2</div>
<br/>

<img src="" class="drag"  draggable="true"> image </div>

Answer 1

我使用w3fools http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop上的方法做的有点不同，看小提琴：https://jsfiddle.net/42jg2kxq/16/

<div class="dropbox" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="box1" class="drag"  draggable="true" ondragstart="drag(event)">box 1</div>

<br/>

<div id="box2"  class="drag"  draggable="true" ondragstart="drag(event)"> box 2</div>
<br/>

<img src="http://lorempixel.com/50/50/" class="drag"  draggable="true">
<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.appendChild(document.getElementById(data));
}
</script>

Answer 2

您应该正在收听正在拖动的元素的'dragend'事件，并在您要删除的地方'掉落'。

function handleDragEnd() {
  // 'dragend' logic goes here
}

some_el.addEventListener('dragend', handleDragEnd, false);

Demo, by me

Code for demo

HTML5 DIV在Chrome和Firefox中无法拖动

2 个答案: