在 HTML5 拖放中，只有 dragstart 会触发

Question

我只使用 HTML5 拖放。我已经使用 JQuery UI 完成了，但现在需要通过清晰的 HTML5 API 完成。

就像我刚才说的：只有 dragstart 会触发。其余的事件我没有抓住。在 dragstart 函数中似乎一切正常： event.dataTransfer 获取数据，我检查了它。 代码如下：

$('#widget')
    .attr('draggable', 'true')
    .on('dragstart', function(event) {
        event.preventDefault();
        event.dataTransfer.effectAllowed = "move";
        event.dataTransfer.setData('text/html', $(this).attr('id'))
        event.dataTransfer.setDragImage(event.target, 24, 32);
        console.log('Im draggable');
        console.log(event.dataTransfer.getData('text/html'));
    })
    .on('dragend', function(event) {
        event.preventDefault();
        /*$(this).css('top', event.pageX + "px");
        event.dataTransfer.getData('text/html');*/
        console.log('dragend');
    });

$('#widget_dest')
    .click(function(event) {
        console.log("click widget_dest");
    })
    .on('dragenter', function(event) {
        event.preventDefault();
        console.log("dragenter");
    })
    .on('dragover', function(event) {
        event.preventDefault();
        console.log("dragover");
    })
    .on('drop', function(event) {
        event.preventDefault();
        event.stopPropagation();

        console.log("drop");

        var data = event.dataTransfer.getData('text/html');
        $(this).append($('#' + data));
        $('#' + data).css('top', event.pageX + 'px');
    });
});

我得到的唯一日志是：dragstart（正确数据）和点击功能。

我特意插入了点击函数来检查 Widget_dest 的属性是否正确。点击事件触发，其余事件不触发。

我会非常感谢任何帮助 维克多

Answer 1

您不应该在dragstart 中使用event.preventDefault()。此示例运行良好：http://jsfiddle.net/noziar/Q3eh3/4/

另外，即使我在大多数地方删除了event.preventDefault()，请注意在dragover 中这是必要的，否则drop 可能不会触发（至少在Chrome 中）。

作为旁注，我不确定您如何能够读取/设置 event.dataTransfer 上的属性，因为 jQuery 事件没有 dataTransfer 属性 - 您可以为此使用 originalEvent。

这是我的代码：

• HTML：

  <div id="widget">I'm a widget</div>
  <div id="widget_dest">
      <span id="widget_box_title">Drag widgets into this box</span>
  </div>
  

• CSS：

  #widget_dest {
      position:absolute;
      top: 40px;
      border-style:solid;
      border-width:1px;
  }
  #widget {
      color:green;
  }
  #widget_box_title {
      color:red;
  }
  

• JS：

  $('#widget')
      .attr('draggable', 'true')
      .on('dragstart', function(event) {
          var original = event.originalEvent;
          original.dataTransfer.effectAllowed = "move";
          original.dataTransfer.setData('Text', $(this).attr('id'))
          original.dataTransfer.setDragImage(event.target, 24, 32);
          console.log('Im draggable');
          console.log(original.dataTransfer.getData('Text'));
      })
      .on('dragend', function(event) {
          $(this).css('top', event.pageX + "px");
          event.originalEvent.dataTransfer.getData('Text');
          console.log('dragend');
      });
  
  $('#widget_dest')
      .click(function(event) {
          console.log("click widget_dest");
      })
      .on('dragenter', function(event) {
          console.log("dragenter");
      })
      .on('dragover', function(event) {
          event.preventDefault();
          console.log("dragover");
      })
      .on('drop', function(event) {
          console.log("drop");
          var data = event.originalEvent.dataTransfer.getData('Text');
          $(this).append($('#' + data));
      });