problem description

the react-draggable drag component has been used in recent projects, but it is required to achieve ctrl+ mouse click to achieve multi-selection and drag, which is not available in react-draggable API. Which great god has a solution, I hope you will not hesitate to give us your advice, thank you very much!

the environmental background of the problems and what methods you have tried

react+dva+es6+bable

related codes

/ / Please paste the code text below (do not replace the code with pictures)
import React, {Component} from "react";
import update from "immutability-helper"
import Draggable from" react-draggable";
import {ContextMenu, MenuItem, ContextMenuTrigger} from "react-contextmenu";
import Resizable from "re-resizable";
import {Icon, Tooltip} from" antd"

import styles from ".. / style.less"

export default class ChartBox extends Component {
constructor (props) {

super(props);
this.state = {
  notDrag: false
}

}

/ / change location
changePosition = (pos, delta) = > {

let {
  changeChartStyle,
  plugStyle,
  id
} = this.props;
let {
  lastX,
  lastY
} = delta;

if(lastX === 0 && lastY === 0){
  return
}

plugStyle = {
  ...plugStyle,
  top: plugStyle.top + lastY,
  left: plugStyle.left + lastX
};

changeChartStyle(id, plugStyle);

};

/ / change the level
changeZindex = (index) = > {

let {
  changeChartStyle,
  plugStyle,
  id
} = this.props;

plugStyle = {
  ...plugStyle,
  zIndex: plugStyle.zIndex + index
};

changeChartStyle(id, plugStyle);

};

changeSize = (e, direction, refToElement, delta) = > {

let {
  plugStyle
} = this.props, {
  width,
  height,
  top,
  left
} = plugStyle;
switch(direction) {
  case "top":
    top = top - delta.height;
    break;
  case "left":
    left = left - delta.width;
    break;
  case "bottomLeft":
    left -= delta.width;
    break;
  case "topLeft":
    left -= delta.width;
    top -= delta.height;
    break;
  case "topRight":
    top -= delta.height;
    break;
}

this.setState({
  chartStyle: {
    width: width + delta.width,
    height: height + delta.height,
    top,
    left
  }
})

};

/ / set width and height
setSize = () = > {

let {
  changeChartStyle,
  plugStyle,
  id
} = this.props;

let {
  chartStyle
} = this.state;

plugStyle = {
  ...plugStyle,
  ...chartStyle
};

changeChartStyle(id, plugStyle);
this.setState({
  chartStyle: undefined
})

};

render () {

let {
  plugStyle,
  index,
  types,
  modelID,
  tbodyStyle = {},
  type,
  getPageData,
  id,
  changeEleActive,
  activeBar,
  active,
  changeActive,
  edit,
  changeZindex,
  delChart,
  copyChart,
} = this.props;

let {
  chartStyle
} = this.state;

let Com = require("./"+types);

let size = chartStyle || plugStyle;

return(
  <Draggable
    position = {{
      x: 0,
      y: 0,
    }}
    disabled={edit}
    grid={[10, 10]}
    onStop={this.changePosition}
  >
    <div
      className={styles.chartBox}
      style={{
        ...plugStyle,
        ...size
      }}>
    
      <Resizable
        onResizeStart={(e) => {
          e.stopPropagation();
        }}
        className={styles.ScaleBox}
        enable={!edit && active?undefined:false}
        size={{
          width: size.width - 2*parseInt(plugStyle.borderWidth),
          height: size.height - 2*parseInt(plugStyle.borderWidth)
        }}
        grid={[10,10]}
        onResize={this.changeSize}
        onResizeStop={this.setSize}
      >
        <div
          className={styles.markBox}

          style={{
            width: "100%",
            height: "100%",
            borderRadius: plugStyle.borderRadius,
            overflow: "hidden"
          }}
        >
          {activeBar(id)}
          <Com {...this.props} active={edit}/>
        </div>
      </Resizable>
    </div>
  </Draggable>
)

}
}

what result do you expect? What is the error message actually seen?

allows multiple selection components to be dragged together.