Drag, Drop, Insert по указателю мыши -> HTML5 - PullRequest
Новая
       1

Drag, Drop, Insert по указателю мыши -> HTML5

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

Я ищу любую информацию, касающуюся перетаскивания, а затем вставку в указатель мыши элемента.

Я видел множество перетаскиваний, которые просто выбрасывают элемент в текстовое поле, и я видел множество вставок при эффектах курсора, но я ищу настоящую вставку при коде указателя мыши.Эффект можно увидеть в большинстве офлайн-программ WYSIWYG, таких как Word, Dreamweaver и т. Д., Где вы можете перетаскивать элемент из-за пределов программы (например, изображение) и отпускать его внутри программы в нужное местозанимаю.

Спасибо.

1 Ответ

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

Вы можете сделать это с помощью перетаскивания HTML5, ваш обработчик перетаскивания будет использовать dataTransfer.files для передачи файлов с вашего рабочего стола в браузер. Когда вы выбрасываете событие, это просто MouseEvent, вы можете получить x и y для этого места в выпадающем DIV.

Например: 

<html>
<style>
#drop {
  border: 2px solid #eee;
  text-align: center;
  padding: 20px;
}
</style>

<div id="drop">Drop files here</div>

<script>
function handleDrop(e) {
  e.stopPropagation();
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; f = files[i]; i++) {
    console.log('File: ' + f.name + ' dropped in the div in [' + e.x + ', ' + e.y + ']');
  }
}

function handleDragOver(e) {
  e.stopPropagation();
  e.preventDefault();
  e.dataTransfer.dropEffect = 'copy';
}

var dropTarget = document.getElementById('drop');
dropTarget.addEventListener('dragover', handleDragOver, false);
dropTarget.addEventListener('drop', handleDrop, false);
</script>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...