在拖动之前清除内容选择的跨浏览器方法

Cross-browser method to clear content selection before dragging

本文关键字：选择 浏览器 方法 拖动 清除      更新时间：2023-09-26

在执行HTML5拖动之前，我一直在尝试解决清除内容选择所涉及的各种跨浏览器问题。

当前进展如下：https://jsfiddle.net/kamelkev/36ek328t/

$(document).ready(function() {
  var down = 0;
  $(document.body).on('dragstart.draggable', function(event) {
    if (!$(event.target).attr('draggable')) {
      event.preventDefault();
    }
    return;
  });
  $('div[draggable]').on('dragstart', function(event) {
    event.originalEvent.dataTransfer.setData("Text", '');
  });
  $('div[draggable]').on('mousedown.selections', function(event) {
    down = 1;
    return true;
  });
  $('div[draggable]').on('mouseup.selections', function(event) {
    down = 0;
    return true;
  });
  $('div[draggable]').on('mousemove.selections', function(event) {
    var doc = event.target.ownerDocument;
    if (down) {
      if (doc.selection) {
        doc.selection.empty();
      }
      else if (doc.getSelection) {
        if (doc.getSelection().empty) {  // Chrome
          doc.getSelection().empty();
        }
        else if (doc.getSelection().removeAllRanges) {  // Firefox
          doc.getSelection().removeAllRanges();
        }
      }
      down = 0;
    }
    else {
      down = 0;
    }
    return true;
  });
});

在Chrome/Safari/Firefox中，您会注意到选择所有（命令-a）内容并在"；事物2"；将不仅清除所选内容，而且允许拖动事件继续进行。由于某种原因，IE清除了选择，但随后似乎取消了随后的dragstart事件。

无论是在微软自己的文档中，还是在其他地方，我几乎找不到任何关于这种行为的引用。任何指示都将不胜感激。

我已经尝试了很多方法来解决这个问题，将我的各种选择清除代码移动到不同的事件中，等等，但没有成功。

关于如何解决这个问题有什么想法吗？

我这样做是为了避免在执行HTML5拖动时出现拖动图像问题。"；"鬼"；您在执行HTML5拖动时看到的图像是从所有拖动内容的总和部分生成的，而不是从被拖动的元素生成的。如果用户碰巧进行全选，则随后生成的拖动图像将使用重影图像的所有内容，而不仅仅是正在拖动的元素的内容。对于Firefox/Safari/Chrome来说，这不是问题，因为你可以设置自定义拖动图像，但对于IE来说，几乎没有其他选择。

在尝试了大量事件排列后找到了一个可行的解决方法。

清除IE mousemove处理程序中的选择似乎阻止了dragStart事件的启动。这（和往常一样）与其他浏览器的做法不一致。然而，我发现，只要你不处理iframe，在dragStart处理程序中清除选择就可以像预期的那样工作。如果你在处理iframe，我认为mousedown是你能处理的唯一可行的事件。

然而，其他浏览器的行为也不像人们预期的那样，因为在dragstart处理程序中清除选择似乎会阻止触发预期的dragmove事件。

解决方案是在所有IE浏览器的dragstart处理程序中处理选择清除，在所有其他浏览器的mousemove处理程序中这样做。

相关文章：