我是新来的。这是问题,目前我创建了一个网站并引用了Here中的可拖动按钮。每个浏览器都工作正常,除了IE11,我试图控制台,但没有看到任何问题。然后,我把<meta http-equiv="X-UA-Compatible" content="IE=11">
也不起作用。感谢。
这是我的代码:
var drag1 = document.querySelector('.drag1'),
path1 = document.querySelector('.drag--path1'),
button1 = document.querySelector('.drag--button1'),
shift1 = button1.getAttribute('cx'),
pathR1 = path1.getBoundingClientRect();
function startDrag1(event) {
drag1.classList.add('dragging');
document.addEventListener('mousemove', updateDrag1);
}
function updateDrag1(event) {
// On récupère les coordonnées de la souris
var x = event.pageX || event.clientX;
// On fixe des limites sur X, en se basant sur la taille du path
x = Math.max(x, pathR1.left);
x = Math.min(x, pathR1.left + pathR1.width);
x -= pathR1.left;
// On transforme cet avancement en longeur d'arc
var l = x * path1.getTotalLength() / pathR1.width;
// On récupère le point de l'arc à cet avancement
var point = path1.getPointAtLength(l);
// On fixe les mêmes coordonnées au bouton
button1.setAttribute('cx', point.x);
button1.setAttribute('cy', point.y);
}
function stopDrag1(event) {
document.removeEventListener('mousemove', updateDrag1);
drag1.classList.remove('dragging');
var cx = parseFloat(button1.getAttribute('cx')),
point = path1.getPointAtLength(0);
// On vérifie si on a dépassé 60% d'avancement
if (100 * (cx - shift1) / pathR1.width > 60) {
// Si oui, on défini le point de chute à la fin du path
point = path1.getPointAtLength(path1.getTotalLength());
button1.setAttribute('cx', point.x);
button1.setAttribute('cy', point.y);
finishDrag1();
} else {
// Si non, on défini le point de chute au début du path
point = path1.getPointAtLength(0);
button1.setAttribute('cx', point.x);
button1.setAttribute('cy', point.y);
}
}
function finishDrag1() {
// On a emmené le bouton au bout, on désactive les événements
drag1.classList.add('finished');
window.open("http://www.google.com", "_blank");
var point = path1.getPointAtLength(0);
button1.setAttribute("cx", point.x);
button1.setAttribute("cy", point.y);
drag1.classList.add('dragagain');
}
button1.addEventListener('mousedown', startDrag1);
document.addEventListener('mouseup', stopDrag1);
document.addEventListener('mouseleave', stopDrag1);