3

대학에서 작년 음악 작곡 프로젝트를하고 있습니다. 나는 그것을 접근하는 방법에 대한 대략적인 생각을 가지고 있지만, 나는 올바른 방향으로 포인트를 필요로한다. 위의 이미지에서 HTML5 DIV에서 Canvas로 드래그 앤 드롭

Figure 1

이 내가 그 일을 생각하는 방법이다. 캔버스가 사각형으로 분리되어 [FirstLine] [FirstSquare] -> [FirstLine] [SecondSquare] 등을 저장하는 JavaScript 2D 배열로 매핑됩니다. 두 번째 줄에 도달 할 때까지 [SecondLine] [FirstSquare] 등으로 표시됩니다. .. 당신은 요점을 얻는다. 내가 가진 문제는 HTML 드래그 앤 드롭 함수를 사용하여 오른쪽에있는 DIV를 그리드 사각형으로 끌어 와서 해당 배열 인덱스를 DIV의 ID로 바꾸는 것입니다. 나는 가능 할지도 모르지만 내가 물어볼 줄 알았다. 가능한 경우 다른 apporach 크게 감사하겠습니다.

답변

3

확실히 가능하며 많은 코드가 필요하지 않습니다. 캔버스에 'drop'이벤트 리스너를 추가하십시오. 이벤트 콜백 함수에는 'clientX'및 'clientY'속성이 포함 된 이벤트 객체 인 매개 변수가 있습니다. 이것들은 캔버스 왼쪽 위 모서리에서부터 마우스 커서의 좌표입니다. 이 좌표를 10 (또는 선택한 그리드 셀 크기)로 나누면 정수 부분은 2 차원 배열의 인덱스에 해당합니다.

또한 드래그/드롭 코드의 나머지 부분을 추가하는 것을 잊지 마십시오. 더 많은 정보는 여기 :

http://html5demos.com/drag (소스보기)