Firefox 中的可拖动按钮答案

【问题标题】：Draggable button in FirefoxFirefox 中的可拖动按钮
【发布时间】：2018-05-18 01:29:33
【问题描述】：

是否可以使<button> (<input type="button">) 在 Mozilla Firefox 中使用 HTML5 拖放功能（同时仍可点击）？

以下sn-p在谷歌浏览器中有效，但是按钮和带按钮的div不能拖动Mozilla Firefox（除非Alt键被按下，不知道移动端）：

document.getElementById("myDiv").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDiv")
  }
);

document.getElementById("myButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myButton")
  }
);

document.getElementById("myDivWithButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDivWithButton")
  }
);

<div id="myDiv" draggable="true">Div</div>
<button id="myButton" draggable="true">Button</button>
<div id="myDivWithButton" draggable="true"><button>Div with Button</button></div>

我使用了draggable="true" 和dataTransfer.setData，有什么我遗漏的吗？有什么合理的解决方法吗？

（如果你想知道我需要这个做什么：我有一些东西可以拖动到某个位置或设置在默认位置 [当前视图的中心]，我的想法是通过按钮 [ d&d → 选择位置，单击 → 默认位置]。我知道我想我可以尝试格式化 <div> 以使其看起来像 <button> 或简单地将控件拆分为两个元素，但我宁愿不这样做。）

【问题讨论】：

这个讨论已经完成here。 FF 中似乎有一个错误会阻止拖动按钮。

标签： javascript html drag-and-drop cross-browser draggable

【解决方案1】：

Firefox 上已经存在一个无法拖动按钮的错误。 https://bugzilla.mozilla.org/show_bug.cgi?id=568313

但是，您可以使用“after”伪类拖动包含按钮的 div（现在不可拖动）。示例：

document.getElementById("myDivWithButton").addEventListener(
  "dragstart",
  function (e) {
    e.dataTransfer.setData("Text", "myDivWithButton")
  }
);

.frontdrop {
   position: relative;
}

.frontdrop:after {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
}

&lt;div id="myDivWithButton" class="frontdrop" draggable="true"&gt;&lt;button&gt;Div with Button&lt;/button&gt;&lt;/div&gt;

【讨论】：

虽然这启用了拖动，但它实际上阻止了按钮的交互。尝试点击按钮。

【解决方案2】：

我找到了一个棘手的解决方案：

<label draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '')">
    <input type="button" value="Click me!" style="pointer-events: none" onclick="console.log(event)">
</label>

使用可拖动标签包装输入并将pointer-events CSS 属性设置为none。使用此方法，您的按钮将具有交互性和可拖动性。

【讨论】：

【解决方案3】：

从其他人那里，我了解到您的问题是因为 Firefox 中存在错误。我建议您实现自定义侦听器来模仿拖动事件。我的解决方案如下：

var btn = document.getElementById('btn');

var btnPressed = false;

btn.addEventListener('mousedown', function(e) {
  btnPressed = true;
  px = e.clientX;
  py = e.clientY;
});

btn.addEventListener('mouseup', function(e) {
  btnPressed = false;
})

window.addEventListener('mouseup', function(e) {
  btn.style.MozTransform = "";
  btn.style.WebkitTransform = "";
  btn.style.opacity = 1;
})

window.addEventListener('mousemove', function(e) {
  if(btnPressed) {
    dx = e.clientX - px;
    dy = e.clientY - py;
    btn.style.opacity = 0.85;
    btn.style.MozTransform = "translate(" + dx + "px, " + dy + "px)";
    btn.style.WebkitTransform = "translate(" + dx + "px, " + dy + "px)";
  }
})

&lt;button id="btn"&gt;Drag Me&lt;/button&gt;

我知道它并不完美。在 Firefox 修复此错误之前，硬编码是解决此问题的唯一方法。

【讨论】：

【解决方案4】：

解决方案很简单，jQuery UI:

$(function() {
    $("div.Icon").draggable({ // in "div.icon" is you class
        grid: [80, 80], // for my project I needed a grid
        containment: "document" // will stay in your display
    });
});

【讨论】：

我已经在处理 HTML5 拖放事件，我不希望另一个库在单个浏览器中做同样的事情。最多我可以考虑使用 polyfill，这样我就可以继续使用原生 d&d 事件。
投了反对票，因为问题似乎是关于原生 JS 解决方案，而不是依赖于外部库的解决方案。
@phk 你也可以使用interact.js

【解决方案5】：

您可以在按钮旁边设置一个可拖动的小窗台。

.frontdrop:after {
    content: '';
    top: 0;
    left: 0;
    right: 20;
    bottom: 0;
    border-width="1";
    border-style: solid;
    position: absolute;
}

【讨论】：