HTML5 드래그 후 div 위치 기억하기

Question

사용자가 드래그하여 위치를 변경할 수있는 텍스트 (및 링크) 단락을 포함하는 다양한 크기의 직사각형을 포함하는 로컬 (오프라인) HTML5 페이지를 만들고 싶습니다. 그것들을 어떤 목표에 떨어 뜨릴 필요는 없습니다. 단순히 그들을 드래그하십시오. 그러나 페이지는 의 마지막 위치 인을 기억하고 다시 열 때 표시됩니다.

Canvas를 사용하여 생각했지만 사각형의 텍스트 그리기는 매우 느립니다. 각 단락마다 div (경계선 포함)를 만드는 것이 더 좋습니다. 지금까지 발견 된 가장 가까운 해결책은 this one입니다. 여기서 하나는 "옆으로"끌고 있습니다. 원본 페이지는 here입니다.

이 위치를 저장하기 위해 어떤 코드를 작성해야합니까? (오프라인), 바람직하게는 HTML 페이지 자체를 자체 수정 하시겠습니까? HTML5에는 localStorage 및 sessionStorage 객체가 있지만 사용을 시도하지 않은 것으로 알고 있습니다.

추신 :이 페이지는 독자적으로 사용하고 Firefox를 사용할 때 다른 브라우저에는 관심이 없습니다. jQuery에 Javascript를 사용하는 것을 선호하지만 모든 제안을 환영 할 것입니다. 응답을 기다리는 동안

는 PS, 나는 this site에 걸쳐 발견 : HTML5, CSS3 및 자바 스크립트로 만든

이 다이어그램은 캔버스와 오프라인에서 사용이 가능하여 만든, 덕분에 ApplicationCache합니다.

이것이 가야할 길입니까?

Answer 1

로컬 정보 저장소에 div 정보 (위치 및 너비, 결국 높이)를 저장할 수 있습니다. 페이지를 다시로드 할 때 모든 것을 다시 렌더링하려면 localstorage에서 다시 가져와야합니다.

jStorage은 로컬 저장소에 "말을 걸 수있는"간단한 플러그인입니다. 이 객체에 직렬화 된 객체를 저장 한 다음 페이지로드시 루프를 반복 할 수 있습니다.