Javascript 在同一单击中创建并拖动
我想用D3.js创建一个类似scratch或node red的应用程序，我的意思是通过单击“按钮列表”创建一个元素，然后将它们拖到一个区域上进行排列，从而创建一些svg元素 这个想法与我下面的代码配合使用。我可以单击以创建svg组的形状。创建后，我可以再次单击它们并将其拖动到svg区域上 但是，我想模仿相同的应用程序节点red和scratch的行为，方法是用创建新svg元素时使用的相同单击来拖动它。一句话，省得一点点击。但我不知道如何在创建的元素上以编程方式启动拖动行为。这是我的工作代码 var svg=d3.selectbody.appendsvg .宽度，1500 .身高800； addButtonsvg，“添加”； 函数addShapesvg，x，y{ var dotContainer=svg.appendg .attrclass，dotContainer .基准{ x:x， y:y } .attr转换，函数{ 返回“translate”+d.x+“”+d.y+； } .calld3.drag .onstart，dragstarted .昂德拉格，被拖走了 .onend，德拉根德； var text=dotContainer.appendtext .基准{ x:20， y:20 } .attrx，函数d{ 返回d.x； } .attry，函数d{ 返回d.y； } .文本“标题”； var rectangle=dotContainer.appendrect .宽度，200 .身高100 .attrx，0 .attry，0 .attr'style'，不透明度：1；填充：ffffff；填充不透明度：0；笔划：000000；笔划宽度：5；笔划不透明度：1 .attrry，8岁； 返回容器； } 函数dragstartedd{ 让xCoord=d3.event.dx-d3。选择this.attr'x' 让yCoord=d3.event.dy-d3。选择this.attr'y' } 函数draggedd{ d3.选择this.选择text.textd.x+'；'+d.y； d、 x+=d3.event.dx； d、 y+=d3.event.dy； d3.选择this.attrtransform，函数D，i{ 返回translate+[d.x，d.y]+ }; } 函数dragended{ d3.选择this.attrtransform，函数D，i{ 返回translate+[d.x，d.y]+ }; } 函数addButtonarea，title{ var组=面积。附录G； group.appendrect .attrx，0 .attry，0 .宽度，100 .身高50 .attr'style'，'填充：rgb255,0,0；笔划宽度：1；笔划：RGB200200200'； group.appendtext .attr'x'，20 .attr'y'，20岁 .texttitle； 组。关于“mousedown”，函数{ var grp=addShapearea，0,0； //从这里开始拖动grp？？？ }; } 你可以在用来创建新形状的按钮上听到鼠标向下移动的声音。在事件侦听器中，创建一个新形状并创建一个新的mousedown事件，该事件将立即发送到新元素上。这个新的mousedown事件将触发拖动行为，一次触发拖动启动侦听器，并持续触发拖动侦听器，直到升起鼠标。这可能看起来像：Javascript 在同一单击中创建并拖动,javascript,svg,d3.js,drag,Javascript,Svg,D3.js,Drag,我想用D3.js创建一个类似scratch或node red的应用程序，我的意思是通过单击“按钮列表”创建一个元素，然后将它们拖到一个区域上进行排列，从而创建一些svg元素 这个想法与我下面的代码配合使用。我可以单击以创建svg组的形状。创建后，我可以再次单击它们并将其拖动到svg区域上 但是，我想模仿相同的应用程序节点red和scratch的行为，方法是用创建新svg元素时使用的相同单击来拖动它。一句话，省得一点点击。但我不知道如何在创建的元素上以编程方式启动拖动行为。这是我的工作代码 va
select.on("mousedown", function(event,d) {
// create some new shape:
var aNewShape = container.append("shape")
.attr(...)
....
// create a new event and dispatch it on the new shape
var e = document.createEvent("MouseEvents");
e.initMouseEvent("mousedown", true,true,window,0,0,0,event.x,event.y)
aNewShape.node().dispatchEvent(e)
})
当有疑问时，您总是可以回到vanilla JavaScript。在这种情况下，您可以使用d3.event对象作为属性字典来调度，实质上是克隆元素 然后，MouseMove事件接管并无缝处理： var svg=d3.selectbody.appendsvg .宽度，1500 .身高800； addButtonsvg，“添加”； 函数addShapesvg，x，y{ var dotContainer=svg.appendg .attrclass，dotContainer .基准{ x:x， y:y } .attr转换，函数{ 返回“translate”+d.x+“”+d.y+； } .calld3.drag .onstart，dragstarted .昂德拉格，被拖走了 .onend，德拉根德； var text=dotContainer.appendtext .基准{ x:20， y:20 } .attrx，函数d{ 返回d.x； } .attry，函数d{ 返回d.y； } .我没有发短信 它是'； var rectangle=dotContainer.appendrect .宽度，200 .身高100 .attrx，0 .attry，0 .attr'style'，不透明度：1；填充：ffffff；填充不透明度：0；行程：000000；笔画宽度：5；笔划不透明度：1 .attrry，8岁； 返回容器； } 函数dragstartedd{ 让xCoord=d3.event.dx-d3。选择this.attr'x' 让yCoord=d3.event.dy-d3。选择this.attr'y' } 函数draggedd{ d3.选择this.选择text.textd.x+'；'+d.y； d、 x+=d3.event.dx； d、 y+=d3.event.dy； d3.选择this.attrtransform，函数D，i{ 返回translate+[d.x，d.y]+ }; } 函数dragended{ d3.选择this.attrtransform，函数D，i{ 返回translate+[d.x，d.y]+ }; } 函数addButtonarea，title{ var组=面积。附录G； group.appendrect .attrx，0 .attry，0 .宽度，100 .身高50 .attr'style'，'填充：rgb255,0,0；笔划宽度：1；笔划：RGB200200200'； group.appendtext .attr'x'，20 .attr'y'，20岁 .texttitle； 组。关于“mousedown”，函数{ var grp=addShapearea，0,0； grp.node.dispatchEventnew MouseeEvent 穆斯敦， d3.事件 ; }; }
您好，我不是100%确定，但我相信您应该在自己的代码之前导入库文件，例如d3.v5.min.js。除此之外，如果您将grp对象作为变量传递给dragstarted？Mousedown，会发生什么→ 克隆元素。滑鼠→ 让克隆活下去。而mousemove和mousedown→ 移动克隆的元素。鼠标→ 放置克隆元素。谢谢你，鲁本，我没想到再发射一次鼠标事件。我是个新手，没有足够的javascript知识。继续学习。。。