Firefox中的可拖动按钮

Question

是否有可能使<button>(<input type="button">)在HTML中拖放Mozilla Firefox(同时仍然可以点击)？

以下代码片段适用于谷歌浏览器,但按钮和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'伪类拖动包含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中存在一个bug.我建议你实现自定义监听器来模仿拖动事件.我的解决方案如下:

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

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

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