Reactの合成イベントonDragがうまく動作してくれない
React合成イベントのonDragが正常に動作しない
解決したい内容
- Nodeをドラッグ＆ドロップで画面の好きな位置に配置したいです。
- あと、ドラッグした時に文字の部分を選択しないとNodeをドラッグできないのでそれも解決できればと思っています。
不具合の様子(動画)
動画のように、ドラッグで掴むときは文字の部分を選択した状態にしなければNodeを掴むことができません。
なんとか掴めたとしても、任意の位置でドロップするとブラウザの左上の方に移動してしまいます。
該当するソースコード
Technology.tsx
const Technology = forwardRef((
{
id,
name,
choosing,
setChoosing,
selectedNodeIds,
setSelectedNodeIds,
topTechnologyId,
setTopTechnologyId
}: TechnologyProps,
technologyRef
) => {
const [liftUp, liftDown, move] = useNode(technologyRef)
return (
<>
<div>
<div
className='technology'
id={id}
style={{ cursor: "pointer" }}
ref={technologyRef}
onClick={(e) => {
selectTechnology(e)
e.stopPropagation()
}}
// onDragStart={liftUp}
// onDragEnd={liftDown}
onDrag={move}
>
{name}<br/>
{id}
</div>
</div>
</>
)
})
export default Technology
useNode.tsx
import React, { RefObject, useRef, useState } from "react";
const useNode = (Node: RefObject<HTMLElement>, activeBorderColor:string = "red", activeBorderType:string = "dashed", inactiveBorderColor: string = "black", inactiveBorderType:string = "solid") => {
const beforeMovePosition = useRef<{x: number, y: number}>()
const afterMovePosition = useRef<{x: number, y: number}>()
const mousePosition = (e: React.MouseEvent): {x: number, y: number} => {
return {x: e.pageX, y: e.pageY}
}
const liftUp = (e: React.MouseEvent): void => {
Node.current.style.position = 'absolute'
beforeMovePosition.current = mousePosition(e)
};
const move = (e) => {
const nativeEvent = e.nativeEvent as MouseEvent
console.log(`${mousePosition(nativeEvent).x}px`);
console.log(`${mousePosition(nativeEvent).y}px`);
Node.current.style.position = 'absolute'
Node.current.style.left = `${mousePosition(nativeEvent).x}px`;
Node.current.style.top = `${mousePosition(nativeEvent).y}px`;
}
const liftDown = (e: React.MouseEvent): void => {
const nativeEvent = e.nativeEvent as MouseEvent
afterMovePosition.current = mousePosition(nativeEvent)
const differentialMousePosX = afterMovePosition.current.x - beforeMovePosition.current.x
const differentialMousePosY = afterMovePosition.current.y - beforeMovePosition.current.y
Node.current.style.left = (nativeEvent.pageX - nativeEvent.offsetX + differentialMousePosX) + "px"
Node.current.style.top = (nativeEvent.pageY - nativeEvent.offsetY + differentialMousePosY) + "px"
};
return [liftUp, liftDown, move]
}
export default useNode
すみませんがお力をお借りできると幸いです。
なにとぞご協力のほどよろしくお願い致します。
0
