Question

是否可以让<button>（<input type="button">）使用HTML5拖放Mozilla Firefox（同时仍然可点击）？

以下代码段适用于Google Chrome，但按钮和div with button无法拖动Mozilla Firefox（除非按下 Alt 键，不知道移动设备）：

＆＃13;

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")
  }
);

＆＃13;

<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>

＆＃13;

我使用了draggable="true"和dataTransfer.setData，我错过了什么？有一些明智的解决方法吗？

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

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中存在错误。我建议你实现自定义监听器来模仿拖动事件。我的解决方案如下：

Prelude> let test = "1224    926 1380    688 845 109 118 88  1275    1306    91  796 102 1361    27  995\n1928    2097    138 1824    198 117 1532    2000    1478    539 1982    125 1856    139 475 1338"
Prelude> map (map read) (map words $ lines test) :: [[Int]]
[[1224,926,1380,688,845,109,118,88,1275,1306,91,796,102,1361,27,995],[1928,2097,138,1824,198,117,1532,2000,1478,539,1982,125,1856,139,475,1338]]

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)";
  }
})

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

Answer 3

使用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
    });
});

Answer 4

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

const fs = require('fs');
const path = require('path');

const dirs = fs.readdirSync('node_modules');
const data = {};
//add ones you care about
const trackedPackages = ['express', 'passport', 'body-parser'];
dirs.forEach(function(dir) {

   if(trackedPackages.indexOf(dir) > -1){
      try{
        const json = JSON.parse(
          fs.readFileSync(path.join('node_modules', dir, 'package.json'), 'utf8')
        );
        data[dir] = json.version;
      }catch(e){
        console.log(`failed to read/parse package.json for ${dir}`, e);
      }
   }

});
console.debug(data['express']); //= 4.11.2

用可拖动的标签包裹输入，并将<label draggable="true" ondragstart="event.dataTransfer.setData('text/plain', '')"> <input type="submit" style="pointer-events: none" onclick="console.log(event)"> </label> CSS属性设置为pointer-events。使用此方法，您的按钮将是可交互且可拖动的。

Answer 5

您可以在按钮旁边放置一个可拖动的小壁架。

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

Firefox中的可拖动按钮

5 个答案: