css3 크기 조정 된 요소를 드래그 할 수있게 만드는 방법

CSS3 크기 속성이 jquery UI에 나쁜 영향을 미칠 것, 특히 정렬 가능함을 발견했습니다. 문제는 요소가 크기 조정되지 않은 것처럼 마우스를 움직여야한다는 것입니다. 이 jsfiddle example을 확인하십시오.css3 크기 조정 된 요소를 드래그 할 수있게 만드는 방법

아무에게도이 문제를 해결하는 방법에 대한 의견이 있습니까? 마우스가 움직이는 속도를 변경할 수 있습니까? html5 네이티브 drag and drop을 살펴보고 나만의 sortable 함수를 작성하려고합니다.

는 UPDATE

: CSS3로 확인

의 jQuery UI를 드래그 작품 요소를 조정은, 여기에 대한 fiddle입니다.

출처

2011-02-13 lashleigh

실제 답변은 특수 이동 기능을 쓰지 않아도됩니다. 정렬되는 항목이 오버플로가 숨겨진 적절한 크기의 div에 래핑 된 경우 Jquery UI sortable을 사용할 수 있습니다. 예를 들어 this jsfiddle을 확인하십시오.

문제는 스케일 된 div가 음수 여백을 사용하여 서로 가깝도록해야한다는 것이 었습니다. 그런 다음 항목을 드래그하기 시작했을 때 잘못된 공간을 차지했습니다. 크기 조정되지 않은 div로 래핑 된 배율 조정 된 항목은 예상대로 작동합니다.

출처

2011-02-22 01:27:38 lashleigh

jquery UI를 사용하기위한 해결책이 없지만 Raphael 및 다른 SVG 객체로 작업하기위한 솔루션이 있습니다.

먼저 크롬이나 파이어 폭스를 사용하여 this jsfiddle에서 점들을 드래그하십시오. 상자의 눈금을 변경하려면 두 점을 모두 드래그하고 하단의 슬라이더를 사용하십시오. 슬라이더의 기본 눈금 범위는 .4에서 1.2 사이입니다. Chrome에서는 슬라이더가 실제로 슬라이더이지만 Firefox에서는 텍스트 상자로 표시됩니다. firefox를 사용하는 경우 100 배율, 즉 70 => 0.7을 입력하십시오.

방금 경험 했어야 할 점은 눈금에 관계없이 검은 색 점 추적이 있고 눈금이 1.0 인 경우 빨간색 점만 추적한다는 것입니다.

두 점이 서로 다른 'onMove'기능을 사용하고 있기 때문입니다. 붉은 점이 정상적으로 움직이는 동안 검은 점은 1/눈금에 따라 움직입니다.

var moveCorrected = function (dx, dy) { 
    // move will be called with dx and dy 
    this.attr({ 
     cx: this.ox + (1/scale)*dx, 
     cy: this.oy + (1/scale)*dy 
    }); 
} 
var move = function (dx, dy) { 
    // move will be called with dx and dy 
    this.attr({ 
     cx: this.ox + dx, 
     cy: this.oy + dy 
    }); 
}

그래서 내 원래 질문에 대한 답변입니다. 마우스가 움직이는 방식, 즉 사용자 정의 된 동작을 변경할 수 없으며 변경할 수 없지만 이동중인 개체의 이동 기능을 마우스로 추적 할 수 있습니다.

출처

2011-02-22 00:14:54 lashleigh

css3 크기 조정 된 요소를 드래그 할 수있게 만드는 방법

답변

관련 문제