katspaugh · August 27, 2023 09:50
diff --git a/drag.js b/drag.js
 // Drag-n-drop

 /*
 <html>
  <div id="container" draggable="true" style="width: 300px; cursor: grab; border: 10px solid red;">
  Drag me
  </div>

  <div id="droparea" style="border: 2px dashed; margin: 2em; padding: 4em 2em; text-align: center">
    Drop here
  </div>
 </html>
 */

 import WaveSurfer from 'https://unpkg.com/[email protected]/dist/wavesurfer.esm.js'

 const wavesurfer = WaveSurfer.create({
  container: '#container',
  waveColor: 'rgb(200, 0, 200)',
  progressColor: 'rgb(100, 0, 100)',
  url: '/examples/audio/audio.wav',
  height: 128
 })

 wavesurfer.once('interaction', () => {
  wavesurfer.playPause()
 })

 // Drag
 document.querySelector('#container').addEventListener('dragstart', (e) => {
  console.log('dragstart')
  e.stopPropagation()
  e.dataTransfer.setData('text/plain', wavesurfer.options.url);
  e.dataTransfer.effectAllowed = 'move'
  e.target.style.cursor = 'grabbing'
 }, { capture: true })

 document.querySelector('#container').addEventListener('dragend', (e) => {
  console.log('dragend')
  e.stopPropagation()
  e.target.style.cursor = 'grab'
 }, { capture: true })

 // Drop
 document.querySelector('#droparea').addEventListener('dragover', (e) => {
  console.log('dragover')
  event.preventDefault()
  e.target.style.borderColor = 'red'
  e.dataTransfer.dropEffect = 'move'
 })
 document.querySelector('#droparea').addEventListener('dragleave', (e) => {
  console.log('dragleave')
  e.target.style.borderColor = 'black'
 })
 document.querySelector('#droparea').addEventListener('drop', (e) => {
  console.log('drop')
  e.preventDefault()
  e.target.style.borderColor = 'black'
  const data = e.dataTransfer.getData('text/plain')
  e.target.textContent = data
 })
	// Drag-n-drop

	/*
	<html>
	<div id="container" draggable="true" style="width: 300px; cursor: grab; border: 10px solid red;">
	Drag me
	</div>

	<div id="droparea" style="border: 2px dashed; margin: 2em; padding: 4em 2em; text-align: center">
	Drop here
	</div>
	</html>
	*/

	import WaveSurfer from 'https://unpkg.com/[email protected]/dist/wavesurfer.esm.js'

	const wavesurfer = WaveSurfer.create({
	container: '#container',
	waveColor: 'rgb(200, 0, 200)',
	progressColor: 'rgb(100, 0, 100)',
	url: '/examples/audio/audio.wav',
	height: 128
	})

	wavesurfer.once('interaction', () => {
	wavesurfer.playPause()
	})

	// Drag
	document.querySelector('#container').addEventListener('dragstart', (e) => {
	console.log('dragstart')
	e.stopPropagation()
	e.dataTransfer.setData('text/plain', wavesurfer.options.url);
	e.dataTransfer.effectAllowed = 'move'
	e.target.style.cursor = 'grabbing'
	}, { capture: true })

	document.querySelector('#container').addEventListener('dragend', (e) => {
	console.log('dragend')
	e.stopPropagation()
	e.target.style.cursor = 'grab'
	}, { capture: true })

	// Drop
	document.querySelector('#droparea').addEventListener('dragover', (e) => {
	console.log('dragover')
	event.preventDefault()
	e.target.style.borderColor = 'red'
	e.dataTransfer.dropEffect = 'move'
	})
	document.querySelector('#droparea').addEventListener('dragleave', (e) => {
	console.log('dragleave')
	e.target.style.borderColor = 'black'
	})
	document.querySelector('#droparea').addEventListener('drop', (e) => {
	console.log('drop')
	e.preventDefault()
	e.target.style.borderColor = 'black'
	const data = e.dataTransfer.getData('text/plain')
	e.target.textContent = data
	})