将参数添加到 d3 拖动行为后，元素不再可拖动

Element no longer draggable after adding parameter to d3 drag behavior

本文关键字：拖动 元素 不再 参数 添加 d3      更新时间：2023-09-26

以下代码创建一个圆并使其可拖动：

.HTML： 

<svg width='400' height='400'>
  <rect width='100%' height='100%'></rect>
  <circle transform='translate(259.5,197)' r='10'></circle>
</svg>

.JS：

 var drag = d3.behavior.drag().on('drag', dragMove)
 d3.select('svg').append('circle').attr('transform', 'translate(' + '100px' + ',' + '100px' + ')').attr('r', '5').call(drag)
 function dragMove(test) {
   var x = d3.event.x
   var y = d3.event.y
   console.log(test)
   d3.select(this).attr('transform', 'translate(' + '200px' + ',' + '200px' + ')')
 }

它有效。但是当我向dragMove添加一个参数时： 

'drag', function() { dragMove('test') }

拖动功能停止工作（console.log(test)输出'test'，虽然）

为什么会发生这种情况以及如何解决？

https://jsfiddle.net/alexcheninfo/d8doyc9r/4/

应该是这样的：

 var drag = d3.behavior.drag().on('drag', function(d) {
   dragMove(this);//pass the this
 })

 function dragMove(me) {

   var x = d3.event.x
   var y = d3.event.y
   //operate on me
   d3.select(me).attr('transform', 'translate(' + x + ',' + y + ')')
 }

工作代码在这里

希望这有帮助！

相关文章：