问题描述

近期项目中使用了react-draggable拖动组件，但是需求上要求能实现ctrl+鼠标单击来实现多选并拖动，react-draggable API里面并没有这项功能。哪位大神有解决办法，还望不吝赐教，万分感谢！

问题出现的环境背景及自己尝试过哪些方法

react+dva+es6+bable

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
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
}

}

//更改位置
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);

};

//更改层级
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
  }
})

};

//设置宽高
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>
)

}
}

你期待的结果是什么？实际看到的错误信息又是什么？

可以实现多选组件一起拖动。