JQuery-UI Draggable : 드래그 한 요소 크기

다음 작업을 수행하려고합니다. 페이지에 아이콘이 있고 아이콘을 드래그하면 아이콘이 변경됩니다. 봉쇄 구역을 벗어나지 않아야합니다.JQuery-UI Draggable : 드래그 한 요소 크기

$("#myElement").draggalble({ 
    containment: "#myContainer", 
    start: function(event, ui) { 
     $(this).attr("width", "20"); 
     $(this).attr("height", "20"); 
     $(this).attr("src", "newSource.png"); 
    } 
});

아이콘이 성공적으로 변경하고 나는 그것을 드래그 할 수 있습니다 : 나는 무엇을 시도했다

이 같은 것입니다. 유일한 문제는 새 아이콘 크기입니다. 그것은 원래보다 조금 작습니다. 컨테이너의 경계 근처로 드래그하면 너무 일찍 멈추고 컨테이너 경계에는 도달 할 수 없습니다. 특히 나는 위쪽과 오른쪽 경계에 도달 할 수 없지만 여전히 아래쪽과 왼쪽에 도달 할 수 있습니다. draggable 플러그인은 이전 아이콘의 크기를 사용하여 아이콘 제한을 계산하기 때문에 이것이라고 생각합니다.

누군가 새 아이콘을 드래그하고 컨테이너 경계에 도달하는 방법에 대한 조언이 있습니까?

출처

2012-12-17 giocarmine

이미지 크기가 동일하면 CSS로 크기를 설정하고'$ (this) .attr ('size', 'X');'를 제거하면됩니다. – qwerty

감사합니다. 두 번째 이미지는 약간 작습니다. 귀하의 충고를 시도했지만 .attr 대신 .css를 사용하면 아무 것도 변경되지 않습니다. – giocarmine

자바 스크립트가 아닌 실제 CSS 파일에서 크기를 설정할 수 있다는 것을 의미했습니다. 그렇게하면 크기가 두 이미지간에 동일하게 유지되며 자바 스크립트로 크기를 변경할 필요가 없습니다. – qwerty

: 사전에

덕분에 나는 작은 그림의 크기에 따라 컨테이너 객체를 생성했다,이 작업을 얻으려면.

다음 옵션을 사용 - 매개 변수는 각각 용기 DIV 작은 픽처 폭과 작은 그림 높이 위치 :

containment: shrinkSize("#container",20,20),

및 함수는 다음을 수행

function shrinkSize(frameId, smallerWidth, smallerHeight) { 
    var frameOffset = $(frameId).offset(), 
     frameHeight = $(frameId).height()-smallerWidth, 
     frameWidth = $(frameId).width()-smallerHeight; 

    return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]); 
}

Fiddle here.

P. 바이올린에서 끌어 놓은 이미지는 떨어 뜨릴 때 원래 크기로 되돌아갑니다. 의도 한 동작이 아닌 경우 draggable 정의에서 stop 옵션 (기능 사용)을 제거하면됩니다.

출처

2012-12-18 14:58:43 mccannf

JQuery-UI Draggable : 드래그 한 요소 크기

답변

관련 문제