web-dev-qa-db-de.com

Ziehbare Schaltfläche in Firefox

Ist es möglich, einen <button> (<input type="button">) mit HTML5-Drag & Drop in Mozilla Firefox zum Laufen zu bringen (während Sie noch darauf klicken können)?

Das folgende Snippet funktioniert in Google Chrome, aber die Schaltfläche und das Div mit der Schaltfläche können nicht in Mozilla Firefox gezogen werden (es sei denn, das Alt Taste gedrückt, keine Ahnung von Handy):

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>

Ich habe draggable="true" und dataTransfer.setData verwendet. Habe ich etwas übersehen? Gibt es eine sinnvolle Problemumgehung?

(Wenn Sie wissen möchten, wofür ich das benötige: Ich habe etwas, das entweder an eine bestimmte Position gezogen oder an die Standardposition [Mittelpunkt der aktuellen Ansicht] gesetzt werden kann. Meine Idee war, beides über die Schaltfläche [d & d → auswählen positionieren, klicken → Standardposition]. Ich weiß, dass ich versuchen könnte, einen <div> so zu formatieren, dass er wie ein <button> aussieht, oder das Steuerelement einfach in zwei Elemente aufteilen, aber ich würde es lieber nicht.)

22
phk

Es gibt bereits einen Fehler in Firefox, bei dem Sie keine Schaltfläche ziehen können. https://bugzilla.mozilla.org/show_bug.cgi?id=568313

Sie können jedoch Ihren div-enthaltenden Button (der momentan nicht ziehbar ist) mit 'after' Pseudo-Klasse ..__ ziehen. Beispiel:

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>

9
Navjot Ahuja

Von anderen habe ich erfahren, dass Ihr Problem auf einen Fehler in Firefox zurückzuführen ist. Ich empfehle Ihnen, benutzerdefinierte Listener zu implementieren, um das Drag-Ereignis zu imitieren. Meine Lösung lautet wie folgt:

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>

Ich weiß, dass es nicht perfekt ist. Hardcoding ist die einzige Möglichkeit, dieses Problem zu beheben, bis Firefox diesen Fehler behoben hat.

5
Aswath K

Die Lösung ist mit jQuery UI einfach:

$(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
    });
});
3
TimmKroe

Ich habe eine knifflige Lösung gefunden:

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

Schließen Sie die Eingabe mit einer ziehbaren Beschriftung ab und setzen Sie die CSS-Eigenschaft pointer-events Auf none. Mit dieser Methode ist Ihre Schaltfläche interaktiv und kann verschoben werden.

1

Sie können eine kleine Leiste angeben, die neben der Schaltfläche gezogen werden kann.

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