Início / coding / Perguntas / 79493546
Accepted
Milos Stojanovic
Asked: 2025-03-08 06:06:30 +0800 CST

A div arrastável é fixada no lado direito da tela até que a largura máxima seja atingida durante o arrasto

  • 772

Estou fazendo uma extensão do Chrome. Estou tentando fazer o pop-up ser arrastável e poder movê-lo pela tela. Consigo movê-lo, mas ele fica preso no lado direito da tela até chegar a max-width. O que estou fazendo errado?

Aqui está um código simplificado.

const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
    isDragging = true;
    offsetX = e.clientX - popup.offsetLeft;
    offsetY = e.clientY - popup.offsetTop;
});

document.addEventListener("mousemove", (e) => {
    if (isDragging) {
        popup.style.left = `${e.clientX - offsetX}px`;
        popup.style.top = `${e.clientY - offsetY}px`;
    }
});

document.addEventListener("mouseup", (e) => {
    isDragging = false;
});
#popup {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 350px;
    max-width: 500px;
    background: var(--dark-bg, #222);
    color: var(--dark-text, #fff);
    border: 1px solid #333;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    padding: 15px;
    border-radius: 8px;
    z-index: 10000;
}

#popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

#popup-title {
    font-size: 14px;
    font-weight: bold;
}

button {
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 16px;
    width: 26px;
    height: 26px;
    text-align: center;
    padding: 0;
}

#drag-btn {
    background: #326042;
    color: white;
    cursor: grab;
}

#theme-btn {
    background: #ef713b;
    color: white;
}

#close-btn {
    background: #ff5252;
    color: white;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Song Lyrics Finder</title>
    <link rel="stylesheet" href="src/style.css">
</head>
<body>
    <div id="popup">
        <div id="popup-header">
            <p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
            <div style="display: flex; align-items: center; gap: 5px;">
                <button id="drag-btn">✥</button>
                <button id="theme-btn">&#9681;</button>
                <button id="close-btn">&#11199;</button>
            </div>
        </div>
    </div>
</body>
</html>

javascript

1 respostas

  1. Best Answer

    Como o elemento tem um rightvalor, e você está alterando o leftvalor, você está esticando o elemento até que ele atinja o tamanho máximo.

    Eu mudaria a posição usando transform em vez disso. Além de não temperar com a largura do elemento, o desempenho geralmente é melhor (veja nesta resposta do SO ):

    const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
  isDragging = true;
  
  // get previous translate values
  const [tranX, tranY] = (popup.style.translate || '0 0').split(' ').map(v => parseInt(v, 10));
  
  offsetX = e.clientX - tranX;
  offsetY = e.clientY - tranY;
});

document.addEventListener("mousemove", (e) => {
  if (!isDragging) return;

  popup.style.translate = `${e.clientX - offsetX}px ${e.clientY - offsetY}px`;
});

document.addEventListener("mouseup", (e) => {
  isDragging = false;
});
    #popup {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 350px;
  max-width: 500px;
  background: var(--dark-bg, #222);
  color: var(--dark-text, #fff);
  border: 1px solid #333;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
  padding: 15px;
  border-radius: 8px;
  z-index: 10000;
  transform-style: preserve-3d;
}

#popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#popup-title {
  font-size: 14px;
  font-weight: bold;
}

button {
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  width: 26px;
  height: 26px;
  text-align: center;
  padding: 0;
}

#drag-btn {
  background: #326042;
  color: white;
  cursor: grab;
}

#theme-btn {
  background: #ef713b;
  color: white;
}

#close-btn {
  background: #ff5252;
  color: white;
}
    <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Song Lyrics Finder</title>
  <link rel="stylesheet" href="src/style.css">
</head>

<body>
  <div id="popup">
    <div id="popup-header">
      <p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
      <div style="display: flex; align-items: center; gap: 5px;">
        <button id="drag-btn">✥</button>
        <button id="theme-btn">&#9681;</button>
        <button id="close-btn">&#11199;</button>
      </div>
    </div>
  </div>
</body>

</html>

    Outra opção é redefinir righte autodefinir o leftevento atual ao pressionar o mouse, porque vamos atualizá-lo leftde agora em diante:

    const popup = document.getElementById("popup");
const dragBtn = document.getElementById("drag-btn");

let offsetX, offsetY, isDragging = false;

dragBtn.addEventListener("mousedown", (e) => {
  isDragging = true;
  
  const { left } = popup.getBoundingClientRect();
  
  // set right to auto so it won't interfere
  popup.style.right = 'auto';
  
  // set left
  popup.style.left = `${left}px`;

  offsetX = e.clientX - popup.offsetLeft;
  offsetY = e.clientY - popup.offsetTop;
});

document.addEventListener("mousemove", (e) => {
  if (!isDragging) return;
  
  popup.style.left = `${e.clientX - offsetX}px`;
  popup.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener("mouseup", (e) => {
  isDragging = false;
});
    #popup {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 350px;
  max-width: 500px;
  background: var(--dark-bg, #222);
  color: var(--dark-text, #fff);
  border: 1px solid #333;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
  padding: 15px;
  border-radius: 8px;
  z-index: 10000;
}

#popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#popup-title {
  font-size: 14px;
  font-weight: bold;
}

button {
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  width: 26px;
  height: 26px;
  text-align: center;
  padding: 0;
}

#drag-btn {
  background: #326042;
  color: white;
  cursor: grab;
}

#theme-btn {
  background: #ef713b;
  color: white;
}

#close-btn {
  background: #ff5252;
  color: white;
}
    <div id="popup">
  <div id="popup-header">
    <p id="popup-title">Song Lyrics Finder (from Genius.com)</p>
    <div style="display: flex; align-items: center; gap: 5px;">
      <button id="drag-btn">✥</button>
      <button id="theme-btn">&#9681;</button>
      <button id="close-btn">&#11199;</button>
    </div>
  </div>
</div>

    • 1

relate perguntas