2

D3.drag はドラッグをサポートしていますが、「ドロップ」はサポートしていないようです。つまり、dragenter、dragleave、および dragover イベントの検出をサポートしていません。D3 によって作成されたオブジェクトを取得してこれらのイベントをリッスンすることはできますが、D3 オブジェクトをドラッグ可能にしてドラッグ イベント プロパティにアクセスすることはできません。

これが私のコードです。

ドラッグ可能な SVG 円、ドラッグ可能な D3 円、および D3 円の上にドラッグを作成します。

svg のドラッグ可能な円は dragenter および dragleave イベントを引き起こしますが、D3 のドラッグ可能な円は発生しません。

ソリューションに svg を使用しても、ドラッグ イベント プロパティの詳細 (たとえば、イベントの原因となったドラッグ可能なオブジェクトの詳細) を取得する方法がわかりません。

D3 がドラッグ オーバー動作をサポートしないのはなぜですか?

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

4

0 に答える 0