Drop Context

forked from lordliquid's block: Fresh Start

forked from lordliquid's block: Practice.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
        var width = 960,
        height = 700, 
        data = [10, 20, 30],
        t = d3.transition().duration(750).ease(d3.easeLinear),
    		svg = d3.select("body").append("svg")
          .attr("width", width)
          .attr("height", height),
        g = svg.append('g')
          .attr('transform', `translate(${width / 2}, ${height / 2})`),
        droppable1 = g.append('g'),
        droppable2 = g.append('g'),
        position = d3.local();
          
    function started() {
      var dragObj = d3.select(this).classed('dragging', true);
      var circle = dragObj.select('circle');      
      
      d3.event
        .on('drag', dragged)
        .on('end', ended);

function dragged(d) {
        var raised = dragObj.raise();
        var droppables = d3.selectAll('.droppable').nodes();
        
        raised.attr('transform', `translate(${d3.event.x}, ${d3.event.y})`)

droppables.forEach(elem => {
          let datum;          
          var x = parseInt(d3.event.x);
          var y = parseInt(d3.event.y);
          var curr = d3.select(elem);
          var currX = parseInt(curr.attr('cx'));
          var currY = parseInt(curr.attr('cy'));
          var radius = parseInt(curr.attr('r'));
          var pop = curr.select('text');
          
          let dx = x - currX;
          let dy = y - currY;
          let dist = Math.sqrt(dx*dx+dy*dy);
          
          if (dist < radius) {
            console.log('Collide')
            curr.attr('fill', 'white')
            curr.attr('stroke', 'black')            
          } else { 
            curr.attr('fill', curr.attr('origFill'))
            curr.attr('stroke', curr.attr('origStroke'))
          }          
        });
      }
      
      function ended() {        
        var raised = dragObj.raise();
        var droppables = d3.selectAll('.droppable').nodes();
        
        raised.attr('transform', `translate(${d3.event.x}, ${d3.event.y})`)

circle.classed('dragging', false);
        droppables.forEach(elem => {
          let datum;          
          var x = parseInt(d3.event.x);
          var y = parseInt(d3.event.y);
          var curr = d3.select(elem);
          var currX = parseInt(curr.attr('cx'));
          var currY = parseInt(curr.attr('cy'));
          var radius = parseInt(curr.attr('r'));
          
          let dx = x - currX;
          let dy = y - currY;
          let dist = Math.sqrt(dx*dx+dy*dy);
          
          if (dist < radius) {
            curr.data(dragObj.data());
            curr.append('text')    	
              .text(d => d)
              .attr('transform', `translate(${currX}, ${currY})`)
              .attr('cursor', 'default')
            	.attr('text-anchor', 'middle');    
            
          } else { 
            curr.data([undefined])
            curr.select('text').remove();
          }
        })
      }
                           
    }

function makeDroppable(droppable) {    
      return droppable
      	.attr('class', 'droppable');      
    }

droppable1 = makeDroppable(droppable1);
    droppable2 = makeDroppable(droppable2);
    
    droppable1 = droppable1
      .attr('fill', 'blue')
      .attr('origFill', 'blue')
      .attr('stroke', 'white')
      .attr('origStroke', 'white')
      .attr('r', 50)
      .attr('cx', -400)
      .attr('cy', 0)
    
    droppable1
    	.data(d => d || [undefined]);
    
    droppable1
    	.append('circle')
    	.attr('r', droppable1.attr('r'))
    	.attr('cx', droppable1.attr('cx'))
    	.attr('cy', droppable1.attr('cy'));
    
    droppable2 = droppable2
      .attr('fill', 'blue')
      .attr('origFill', 'blue')
      .attr('stroke', 'white')
      .attr('origStroke', 'white')
      .attr('r', 50)
      .attr('cx', 400)
      .attr('cy', 0)
    
    let drop2 = droppable2
    	.data(d => d || [undefined]);
    
    droppable2
    	.append('circle')
    	.attr('r', droppable2.attr('r'))
    	.attr('cx', droppable2.attr('cx'))
    	.attr('cy', droppable2.attr('cy'));
   
    
    var draggable = g.append('g')
    	.attr('class', 'draggable')
    	.attr('fill', 'orange')
    	.attr('stroke', 'green')
    	.call(d3.drag().on('start', started));

draggable
    	.data(data); 
    
    var circle = draggable
    	.append('circle')
    	.attr('r', 25)
    	.attr('cx', 0)
    	.attr('cy', 0);
    
    var text = draggable
    	.append('text')
    	.text(d => d)
    	.attr('transform', 'translate(-10, 6)')
    	.attr('cursor', 'default');

</script>
</body>

https://d3js.org/d3.v4.min.js