69 lines
2.6 KiB
JavaScript
69 lines
2.6 KiB
JavaScript
import React from 'react';
|
|
|
|
|
|
export default class Draggable extends React.Component {
|
|
constructor(){
|
|
super();
|
|
this._timer ;
|
|
}
|
|
componentDidMount() {
|
|
let $this = $(this.refs._container)
|
|
let handle = $this.find(this.props.handle)
|
|
let isDrag = false;
|
|
// let _timer =
|
|
handle.mousedown((e1) => {
|
|
clearTimeout(this._timer)
|
|
|
|
let startX = e1.clientX;
|
|
let startY = e1.clientY;
|
|
let offset = $this.offset();
|
|
// isDrag = false;
|
|
// $this.css({ position: 'fixed', ...offset, width: $this.width(), height: $this.height() });
|
|
this.props.onStart && this.props.onStart(e1, { $target: $this }, { position: 'fixed', ...offset, width: $this.width(), height: $this.height() });
|
|
// this._timer = setTimeout(()=>{
|
|
$(document).mousemove((e) => {
|
|
|
|
let offsetX = e.clientX - startX;
|
|
let offsetY = e.clientY - startY;
|
|
// isDrag = true;
|
|
if (this.props.axis == 'x') {
|
|
// let offsetX = e.clientX - startX;
|
|
$this.css({ left: offset.left + offsetX });
|
|
} else if (this.props.axis == 'y') {
|
|
// let offsetY = e.clientY - startY;
|
|
$this.css({ top: offset.top + offsetY });
|
|
} else {
|
|
// let offsetX = e.clientX - startX;
|
|
// let offsetY = e.clientY - startY;
|
|
$this.css({ left: offset.left + offsetX, top: offset.top + offsetY, zIndex: 9999 });
|
|
}
|
|
this.props.onDrag && this.props.onDrag({ target: this.refs._container });
|
|
}).mouseup(() => {
|
|
$(document).unbind('mousemove');
|
|
$(document).unbind('mouseup');
|
|
this.props.onStop && this.props.onStop({ target: this.refs._container });
|
|
$this.removeAttr("style");
|
|
return false;
|
|
})
|
|
// },200)
|
|
|
|
//if (!isDrag) {
|
|
// this.props.onClick && this.props.onClick({ target: this.refs._container });
|
|
// return false;
|
|
// } else {
|
|
// return false;
|
|
// }
|
|
|
|
});
|
|
}
|
|
render() {
|
|
return (
|
|
<div ref="_container"
|
|
{...this.props}
|
|
id={this.props.id}
|
|
className={`${this.props.defaultClassName} ${this.props.className}`}>
|
|
{this.props.children}
|
|
</div>
|
|
)
|
|
}
|
|
} |