it-roy-ru.com

Перетаскиваемая кнопка в Firefox

Можно ли заставить <button> (<input type="button">) работать с перетаскиванием HTML5 в Mozilla Firefox (при этом все еще активируемым)?

Следующий фрагмент кода работает в 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 → выбрать position, click → default position]. Я знаю, что, возможно, я мог бы попытаться отформатировать <div>, чтобы он выглядел как <button>, или просто разделить элемент управления на два элемента, но я бы предпочел этого не делать.)

22
phk

В Firefox уже есть ошибка, из-за которой вы не можете перетащить кнопку. https://bugzilla.mozilla.org/show_bug.cgi?id=568313

Однако вы можете перетащить кнопку, содержащую элемент div (которая сейчас не перетаскивается), используя псевдокласс 'after' . Пример:

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

От других я узнал, что ваша проблема из-за ошибки в 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 не исправит эту ошибку.

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

Вы можете дать небольшой выступ, который можно перетаскивать рядом с кнопкой.

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