2010-04-26 5 views
2

사용자가 드래그 할 수있는 페이지에 블록을 표시하는 자바 스크립트 웹 앱을 만들고 싶습니다. 배경색으로 DIV를 사용하면 한 번에 90 도씩 회전시킬 수 있습니다.자바 스크립트의 블록 회전

그러나 임의로 회전하고 싶다면 어떻게해야합니까? 차라리 플래시, 이미지, Java 애플릿 또는 HTML5에 의존하지 않아도됩니다. (나는 평범한 DHTML 응용 프로그램, 백엔드의 cgi 스크립트를 사용하고 싶지만 필요로하는 플러그인의 수를 제한하고 싶다.)

(편집 : 드래그 가능한 DIV는 어려운 부분이 아니며 그것을 생각 해보자.)

답변

0

jquery UI를 사용하여 드래그 할 수있는 블록을 만들 수 있습니다.

체크 this out.

+0

그래,하지만 그게 그가 말한 내용인지는 잘 모르겠다. 그는 상자를 회전시키는 방법도 원합니다. –

5

끌기가 쉽습니다. 메기의 대답을 참조하십시오.

하지만 회전? 당신이 그 기술들에 의지하지 않으려한다면, 당신은 거의 할 수 없습니다. 죄송합니다.

WebKit (Safari, Chrome) 및 Mozilla (Firefox)는 CSS 선언을 구현합니다. Javascript를 통해 모든 것을 조작 할 수 있다고 가정합니다. 당신은 모든 브라우저를 작동합니다 뭔가를 찾고있는 것처럼 당신이 (HTML5, 주로) 목록 모든 다른 제한 주어진 그러나

-webkit-transform: rotate(-15deg); 
-moz-transform: rotate(-15deg); 

, 그것은 소리 때문에이 솔루션은 밖으로이다. 당신은 <canvas>에서 그걸 풀 수 있지만, 세계적으로 호환되지는 않지만 고통 스러울 것입니다. 어쨌든 HTML5로 그걸 할 수있을 것 같습니다.

그럼, 안돼. 당신은 옵션이 아닌 것으로 이것을 가능하게 만들 모든 기술을 나열합니다. 브라우저 간 호환성이 없거나 플러그인을 사용하십시오.

새로운 웹이 올 것입니다. 상황이 나아질 것입니다. 지금은 그걸로 처리하십시오.

+0

또한 IE의 경우 BasicImage라는 이름에도 불구하고이 필터를 사용하여 모든 요소를 ​​회전 할 수 있습니다. 필터 : progid : DXImageTransform.Microsoft.BasicImage (rotation = 3); –

+0

crossbrowser div 회전 동작 참조 : http://css3please.com/ 및 JS로 애니메이션 됨. http://raphaeljs.com/image-rotation.html – meo

+0

하품 - 죄송합니다. 답변을 훔쳤습니다. 고의로 마음을 ... – Glycerine

0

안녕하세요. 불행히도, 나는 이것을 보지 못했거나 자바 스크립트로 이것을 해본 적이 없으며 약간의 진전으로 진정한 자바 스크립트를 사용하지 못할 수도 있습니다.

CSS (3)과 함께 할 수있는 방법이 있지만 브라우저마다 조금씩 다릅니다.

-moz-transform: rotate(-45deg); 

및/또는

-webkit-transform: rotate(90deg); 

드래그 처음부터 구축하기 어려운, 아주 간단하지만 간단하게 최후의 수단을 올 것이다 인터넷 검색을합니다.

jQuery 나 Prototype과 같은 것을 사용하는 경우이 두 플러그인 모두 플러그인하기에 충분해야합니다.

희망이 있습니다.

0

상자 주위를 끌기위한 메기의 대답은 good and useful이지만 회전이 더 고통 스러울 것입니다.

예제 here at css3please.com을 살펴보면 상호 브라우저 호환 방법으로 작업을 수행 할 수 있습니다.

유망한 프로젝트처럼 보입니다.