Firefox 中的可拖动按钮

Question

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

以下代码片段在 Google Chrome 中有效，但不能拖动按钮和带按钮的 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> 或简单地将控件分成两个元素，但我宁愿不。）

Answer 1

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

但是，您可以使用 'after' 伪 class 拖动包含 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;
}

<div id="myDivWithButton" class="frontdrop" draggable="true"><button>Div with Button</button></div>

Answer 2

从其他人那里，我了解到您的问题是因为 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)";
  }
})

<button id="btn">Drag Me</button>

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

Answer 3

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

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

Answer 4

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

<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。使用此方法，您的按钮将具有交互性和可拖动性。

Firefox 中的可拖动按钮

Draggable button in Firefox

html

javascript

drag-and-drop

cross-browser

draggable