Question

似乎D3.drag支持拖动而不是＆＃34; drop＆＃34;即它不支持检测dragenter，dragleave和dragover事件。我可以通过D3创建对象来监听这些事件但不能使D3对象可拖动而不能访问drag事件属性。

这是我的代码。

我创建了一个可拖动的svg圈，一个可拖动的D3圈和一个拖过D3圈的圈子。

svg draggable circle会导致dragenter和dragleave事件，但D3可拖动的圈子不会。

即使我使用svg作为我的解决方案，我也不知道如何获取拖动事件属性的详细信息（例如，导致事件的可拖动对象的详细信息）。

为什么D3不支持拖延行为？

＆＃13;

<!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>

＆＃13;

D3支持dragenter和dragleave事件

0 个答案: