как удалить аниминирование по умолчанию (обратно в исходное положение при удалении элемента) элемента html, который draggable = "true" - PullRequest
Новая
       11

как удалить аниминирование по умолчанию (обратно в исходное положение при удалении элемента) элемента html, который draggable = "true"

0 голосов
/ 06 января 2020

См. Этот простой пример (в Chrome Браузере): 

<div id="drag-item" draggable="true">drag me</div>

Когда вы перетаскиваете div в любое место (внутри фрагмента кода), затем опускаете его. Вы можете видеть, что он медленно возвращается в исходное положение.

Теперь в моем случае я не хочу эту анимацию, я нашел способ добиться этого (прослушивая событие dragover на элементе drop и используя e .preventDefault ()): см. фрагмент кода здесь: 

document.addEventListener('dragover', e => {
  e.preventDefault();
}, false);
<div id="drag-item" draggable="true">drag me</div>

Пока все в порядке. Но я обнаружил, что событие dragover будет срабатывать так много раз, когда мы тянем. И как только я использую debounce или throttle для прослушивателя событий, protectDefault не может удалить анимацию. Вот код: 

const dragoverHandler = e => {
   e.preventDefault();
};

const debouncedHandler = _.debounce(dragoverHandler, 100);

document.addEventListener('dragover', debouncedHandler, false);

/** when do not debounce, it works. */
// document.addEventListener('dragover', dragoverHandler, false);
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>

<body>
  <div id="drag-item" draggable="true">drag me</div>
</body>

Так почему же это? Есть ли другие способы удалить эту анимацию по умолчанию? Или используйте мой способ (dragOverEvent.preventDefault ()), как уменьшить время передачи события dragover?

...