고객이 웹 사이트 모형 (예 : 텍스트 블록 및 그림)의 요소를 정렬하는 데 도움이되는 도구 (HTML5, JS 및 CSS3 포함)를 만들고 싶습니다. 나중에 전체 목업 웹 사이트를 재구성하기 위해이 요소의 위치를 저장하고 싶습니다.화면에 요소 정렬 및 위치 저장
아마도 그리드 시스템이 가장 좋을까요?
alt text http://img.skitch.com/20090817-t4p54kbxw3rj58mkmqxspj4qch.png
나는이 문제에 대한 접근 방법에 대한 몇 가지 아이디어를 얻을하실 수 있습니다. 유사한 프로젝트가 있습니까? 한번 살펴보아야합니까?
감사합니다,
스테판
는 jQuery 프레임 워크는 JS와 DHTML 이벤트를 동기화에서 당신을 도울 것입니다. 지금까지이 프로젝트를 사용하는 다른 프로젝트들에 대해서는 전혀 알지 못하지만 그리드 모델은 좋은 방법으로 보입니다. 현재 가지고있는 125px보다 정확한지 확인하십시오.
EDIT : 내 의견에서 언급 한 DHTML 서적에서 언급 한 웹 사이트는 http://www.panic.com입니다. 제품 다운로드를위한 드래그 앤 드롭 시스템을 구현할 때 JavaScript 코드를 통해 영감을 얻을 수 있습니다.
YUI에는 많은 예제가있는이 종류의 위젯이 많이 있습니다.
http://developer.yahoo.com/yui/examples/dragdrop/index.html
특히이 예
http://developer.yahoo.com/yui/examples/dragdrop/dd-groups.html
당신은 XY 좌표를 서버에 Ajax 요청을 전송하고 저장 드롭 이벤트에 리스너를 등록해야 할 것입니다 모든. ALSO
, 당신은 그들이이 이미지 농작물을 포함한 몇 가지 정말 깔끔한 예, 그것은 있을지
http://developer.yahoo.com/yui/examples/imagecropper/feedback_crop.html
확실하지가
http://developer.yahoo.com/yui/examples/resize/index.html
뿐만 아니라 크기를 조정하고 싶은 경우 도움이되지만 내 "PanelManager"는 작업을 좀 더 쉽게 만들 수 있습니다 (비슷한 기능을 갖춘 더 큰 프레임 워크를 아직 사용하지 않는 경우) :"패널"은 일반 동작/수정 (이동, 크기 조정 등)을위한 확장이있는 일반 DOM 요소입니다. 패널은 하나 이상의 "PanelManagers"내에 존재할 수 있으므로이를 단일 단위 (정렬, 루핑 등)로 처리 할 수 있습니다.
예를 들어 (내가 생각하는) 간단한 예제를 보려면 "주문과 함께 드래그 앤 드롭"예제를보십시오. 원하는 정보를 저장하려면 같은 종류의 루핑을 수행해야합니다 (아마도 이름과 위치).
어쨌든 코드를 추출 할 수 있습니다. 접기, 스핀들 및/또는 절단이 자유 롭습니다.
감사합니다. 그림은 Google의 예입니다. :-) – Stefan
나는 DHTML과 CSS에 관한 책을 가지고있다. 여기에 리소스가있다. http://www.designbygrid.com/ 이 책은 DHTML 드래그 앤 드롭 기능이있는 프로덕션 사이트 , 나는 그 순간에 그 이름을 기억할 수 없다. – raptors
Google 코드 프로젝트에 대한 빠른 검색을 통해이 JS 프레임 워크가 유용 할 수도 있습니다. http://code.google.com/p/turbojs 다른 리소스는이 프레임 워크입니다 (이 웹 사이트에는 많은 Zoidberg에서 언급 한 YUI 외에도 다음과 같은 리소스를 사용할 수 있습니다. http://www.dhtmlgoodies.com/index.html?page=dragDrop – raptors