JSFiddle - React, Tailwind, and code Playground

by kassiomaia

HTML

<script src="https://d3js.org/d3.v6.min.js"></script>
<div id="app">
</div>

CSS

.box {
  display: inline-flex;
  padding: .5em 1em;
  border-radius: 1em;
  margin: 0.8em 1em 1em 0.8em;
  font-size: 0.8em;
  text-transform: uppercase;
  background-color: red;
  color: white;
  justify-content: center;
  align-items: center;
}

JavaScript

d3
	.select('#app')
  .enter()
  .data(['Documents', 'Projects', 'Othres', 'System'])
  .enter()
  .append('div')
  .text(value => value)
  .attr('class', 'box')
  .on('click', () => {
  	console.log('ok')
  })
  .call(d3.drag().on("drag", function (evt) {
		d3.select(this)
    	.style('position', 'fixed')
    	.style("top", `${evt.y}px`)
    	.style("left", `${evt.x}px`)
  }))
  


d3.select(window)
	.on('mouseover', (evt) => {
    const event = new CustomEvent('focus', {
      bubbles: true,
      detail: {
        date: new Date(),
      }
    })

    evt.target.dispatchEvent(event)
  })


/* 
document.addEventListener('mouseover', function(event) {

  const evt = new CustomEvent('focus', {
    bubbles: true,
    detail: {
      date: new Date(),
    }
  })

  event.target.dispatchEvent(evt)
}) */


/* const boxes = document.querySelectorAll('.box')

boxes.forEach(box => {
  box.addEventListener('focus', (evt) => {
    console.log('focus', evt.detail)
  })
})
 */
 
 console.log(new EventTarget())