CODEWITHSUNDEEP
javascriptd3.jsdrag-and-dropdragenter
Ahmed Fattah
Ahmed Fattah

Reputation: 21

D3 support for dragenter and dragleave events

It seems that D3.drag supports drag but not "drop" i.e. it does not support detecting dragenter, dragleave and dragover events. I can get object created by D3 to listen to these events but cannot make a D3 object draggable not access the drag event property.

Here's my code.

I create a draggable svg circle, a draggable D3 circle and a drag over D3 circle.

The svg draggable circle causes dragenter and dragleave events but the D3 draggable circle does not.

Even if I use the svg for my solution, I don't know how to get the details of the drag event properties (for example, the details of the draggable object that caused the event).

Why does not D3 support the drag over behaviour?

<!DOCTYPE html>
<meta charset="utf-8">
<!-- create a draggable svg rectangle -->
<div draggable="true">
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="3" fill="blue" />
</svg>
</div>
<div id="canvas"></div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

//create a canvas
var canvas = d3.select("#canvas")
	.append("svg")
	.attr("width", 800)
	.attr("height", 600);  
	
var draggableCircleData = [{x:100, y:100}];
// I can drag this circle but it does not cause the other circle to detect daragenter/ dragleave
var draggableCircle = canvas.append("circle")
	.data(draggableCircleData)
	.style("stroke", "gray")
	.style("fill", "aliceblue")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y;})
	.attr("draggable","true")
	.attr("r", 40)
	.call(d3.drag()
       .on("start", dragstarted)
       .on("drag", dragged)
       .on("end", dragended));

// darg over circle. it detected the draging of the svg circle but not the D3 circle
var dragOverCircleData = [{x:300,y:100}];
var dragOverCircle = canvas.append("circle")
	.data(dragOverCircleData)
	.style("stroke", "gray")
	.style("fill", "white")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 40)
	.on("dragenter", dragenter)
	.on("dragleave",dragleave);


function dragleave(){
	console.log("Darg leave event detected")
	d3.select(this).style("fill", "white");
}
 
 function dragenter(e1){
	 console.log("Darg enter event detected")
	 d3.select(this).style("fill", "blue");
	}
		
	
function dragstarted(d) {
	  d3.select(this).raise().classed("active", true);
	}

function dragged(d) {
		//console.log("Item has been dragged.d: ",d)
	  d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
	  d3.select(this).attr("draggable","true");
	}

function dragended(d) {
	  d3.select(this).classed("active", false);
	}

</script>

Upvotes: 2

Views: 550

Answers (0)

Related Questions