web-dev-qa-db-fra.com

Bouton déplaçable dans Firefox

Est-il possible de faire fonctionner un <button> (<input type="button">) avec HTML5 par glisser-déposer dans Mozilla Firefox (tout en restant cliquable)?

L’extrait suivant fonctionne dans Google Chrome mais le bouton et le div avec ce bouton ne peuvent pas être déplacés par Mozilla Firefox (à moins que le Alt la touche est enfoncée, aucune idée du mobile):

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>

J'ai utilisé draggable="true" et dataTransfer.setData, y a-t-il quelque chose qui m'a échappé? Y at-il une solution de contournement raisonnable?

(Si vous voulez savoir pourquoi j'ai besoin de ça: j'ai quelque chose qui peut être traîné à une certaine position ou réglé à la position par défaut [centre de la vue actuelle], mon idée était de faire les deux via le bouton [d & d → choisir position, cliquez sur → position par défaut]. Je sais que je pense que je pourrais essayer de formater un <div> pour le faire ressembler à un <button> ou simplement scinder le contrôle en deux éléments, mais je préfère ne pas le faire.)

javascripthtmldrag-and-dropcross-browserdraggable
22
phk

Il existe déjà un bug sur Firefox où vous ne pouvez pas faire glisser un bouton. https://bugzilla.mozilla.org/show_bug.cgi?id=568313

Cependant, vous pouvez faire glisser votre bouton contenant les div (qui n'est pas déplaçable pour le moment) en utilisant la pseudo classe 'après' . Exemple:

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

D'après d'autres personnes, j'ai appris que votre problème était dû à un bogue dans Firefox. Je vous suggère d'implémenter des écouteurs personnalisés pour imiter un événement drag .. Ma solution est la suivante:

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>

Je sais que ce n'est pas parfait. Le codage en dur est le seul moyen de résoudre ce problème jusqu'à ce que Firefox corrige ce bogue.

5
Aswath K

La solution est simple avec 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
    });
});
3
TimmKroe

Vous pouvez donner un petit rebord qui peut être déplacé à côté du bouton.

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