web-dev-qa-db-ja.com

Firefoxのドラッグ可能なボタン

<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>のように見せたり、コントロールを2つの要素に分割したりできると思いますが、そうはしません。 ）

javascripthtmldrag-and-dropcross-browserdraggable
24
phk

トリッキーな解決策を見つけました：

<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に設定します。この方法を使用すると、ボタンはインタラクティブでドラッグ可能になります。

3
Dmitry Prikhodko

Firefoxには、ボタンをドラッグできないバグがすでにあります。 https://bugzilla.mozilla.org/show_bug.cgi?id=56831

ただし、「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>
8
Navjot Ahuja

他の人から、あなたの問題は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がこのバグを修正するまで、この問題を解決する唯一の方法はハードコーディングです。

4
Aswath K

解決策は簡単です 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
    });
});
1
TimmKroe

ボタンの横にドラッグできる小さな棚を与えることができます。

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