Как включить перетаскивание, когда мышь уже нажата на элементе и уже перемещена? - PullRequest
Новая
       8

Как включить перетаскивание, когда мышь уже нажата на элементе и уже перемещена?

0 голосов
/ 25 ноября 2018

У меня написан код, позволяющий перетаскивать HTML-элемент после того, как указатель мыши был над этим элементом в течение определенного периода времени.

Проблема заключается в том, что при использовании встроенного перетаскивания HTML-кодаи я включаю свойство draggable, когда этот тайм-аут истекает (мышь была на этом элементе в течение этого периода времени), если мышь была перемещена, когда он был неактивен до истечения этого тайм-аута, HTML не сработаетdragstart событие или даже начало перетаскивания элемента.

Ниже приведен пример. 

var t;

function startDelayedDrag() {
  clearTimeout(t);
  document.getElementById('dragtarget').draggable = false;
  console.log('mousedown')
  t = setTimeout(function() {
    console.log('dragging enabled')
    document.getElementById('dragtarget').draggable = true;
  }, 1000);
}
.droptarget {
  float: left;
  width: 100px;
  height: 35px;
  margin: 15px;
  padding: 10px;
  border: 1px solid #aaaaaa;
  user-select: none;
}
<div class="droptarget">
  <p onmousedown="startDelayedDrag()" id="dragtarget">Drag me!</p>
</div>

<div class="droptarget"></div>

1 Ответ

0 голосов
/ 26 ноября 2018

Этот хитрый и может отличаться от того, что вы имели в виду, но вот идея, как решить вашу проблему:

  1. Запустить событие перетаскивания
  2. Чтобы скрыть объект перетаскивания, задайте изображение с помощью setDragImage
  3. . Клонируйте узел элемента перетаскивания, скройте клон и добавьте его в документ (поскольку изменить изображение, установленное с помощью setDragImage) * 1010 невозможно.*
  4. Начните тайм-аут, чтобы изменить видимость элемента-призрака

Это можно еще улучшить многими способами, но я думаю, вы можете получить механику того, как он работает, как есть.Для справки см. Следующий фрагмент: 

const [$drag] = document.getElementsByClassName('drag')
const [$pixel] = document.getElementsByClassName('pixel')
let $ghost = null

$drag.addEventListener("dragstart", e => {
  // set the current draged element invisible
  e.dataTransfer.setDragImage($pixel, 0, 0)
  
  // create a ghost element
  $ghost = $drag.cloneNode(true)
  $ghost.style.position = "absolute"
  $ghost.style.display = "none"
  document.body.appendChild($ghost)

  setTimeout(() => {
    $ghost.style.display = 'block'
  }, 1000)
})

$drag.addEventListener("drag", e => {
  // keep the ghost position to follow the mouse while dragging 
  $ghost.style.left = `${e.clientX}px`
  $ghost.style.top = `${e.clientY}px`
}, false);

$drag.addEventListener("dragend", e => {
  // remove the ghost
  if ($ghost.parentNode) $ghost.parentNode.removeChild($ghost)
}, false)
.content {
  display: flex;
}

.box {
  width: 100px;
  height: 35px;
  padding: 10px;
  margin: 10px;
  border: 1px solid #aaaaaa;
}

.drop {
  user-select: none;
}

.drag {
  text-align: center;
}

.pixel {
  width: 1px;
  height: 1px;
  background-color: white;
}
<div class="content">
  <div draggable="true" class="drag box">Drag</div>
  <div class="drop box"></div>
  <div class="pixel"></div>
</div>
...