Javascript D3 SVG我想通过鼠标拖动高亮显示元素数组

我有一个SVG容器，其中包含许多元素，每个元素包含一个rect和一些水平数组中的文本元素

我想单击一个元素并拖动到其他元素之一。第一个元素和拖过的元素应该高亮显示，就像在普通文本编辑器选择中一样

最后，我想知道选择的第一个和最后一个元素，以便访问它们的数据

我尝试使用d3拖动行为，但： 1.中间元素不能突出显示 2.dragend没有告诉我哪个元素是最后一个元素

还尝试使用鼠标事件，但： 1.我可以突出显示每个中间项，但如果将鼠标移回起始位置，则无法轻松删除突出显示。 2.如果将鼠标移出容器，我可能会错过鼠标向上移动事件，留下高亮显示的元素。 3.除非我收集所有鼠标悬停事件，否则我仍然不知道我在完成哪个元素

我实际上不想移动选定的元素，只想知道第一个和最后一个选定的元素

我制作了这把小提琴来说明这个问题：

HTML

CSS

---

感谢Andrew

这听起来像是，除了拖动行为之外，您还需要

鼠标悬停

侦听器来告诉您何时在特定元素上拖动。如果你发布一些代码，告诉我们你到底在哪里挣扎，我会很有帮助。事实上，这个问题非常广泛。我更新了页面，加入了一个完整的例子。

<svg class='demosvg' version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" >
    <rect width="400" height="220"></rect>
    <g id="container" transform="translate(10,10)"></g>
</svg>

var mydata = [1, 2, 3, 4, 5];
/* each box is a group with a rect and text 
   positioned according to the data value
   on drag/drop we want to know the dragged element, and the one it is dropped on.
   we would like to highlight all the intervening elements too.

   Ultimately we just want a result e.g. 2 was dragged to 5
*/
var boxg = d3.select('#container').selectAll('g').data(mydata).enter()
    .append('svg:g')
    .attr('id', function (d, i) {
        return "b" + d;
    })
    .attr('transform', function (d, i) {  return "translate(" + d * 50 + ",80)";})
    .call(d3.behavior.drag()
        .on("dragstart", function (d, i) {d3.select(this).classed("selected", true); })
        .on("drag", function (d, i) {
            // which element are we over here - to highlight it
            var el = document.elementFromPoint(d3.event.x, d3.event.y);
            console.log(el);
        })
        .on("dragend", function (d, i) {
            console.log(d);
            console.log(this);
            console.log(d3.event);
            // turn off all highlights
            d3.selectAll('#container g').classed("selected", false);

        // Which box got dropped on here ? 
    })
);

boxg.append('svg:rect')
    .classed('box', true)
    .attr('width', 40).attr('height', 40);

boxg.append('svg:text')
    .text(function(d,i) { return d; })
    .attr('dx', 15).attr('dy', 20);

.demosvg {  fill:silver;}
.box { fill:lightblue;}
text { fill:black;} 
.selected  .box{ fill:gold;}