可拖动按钮在IE 11中不起作用

时间:2018-02-28 07:58:30

标签: javascript internet-explorer-11

我是新来的。这是问题,目前我创建了一个网站并引用了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);

0 个答案:

没有答案