드래그 및 크기 조정이 가능한 상자에 문제가 있습니다. 그것은 잘 작동, 드래그하고 괜찮아요 rezises,하지만 난 이러한 요소를 보유하고 오버플로를 트리거하고 그것을 div 실패 rezise 시도하자 컨테이너 폭으로 다시 설정합니다.jQuery - 크기 조정 가능 + 드래그 가능, 스크롤 (왼쪽, 위)이 추가되지 않았습니다.
UPDATE : 좋아, 문제가 잘못 설명 아마 필자가이 URL로 이동 한 후 크기를 조정하려고 http://jsfiddle.net/JTTYM/52 및 녹색 상자를 찾기 위해 스크롤합니다. 크기가 조절되면 오버플로 스크롤 막대가 사라집니다. 위에서 말했듯이 오버플로 값은 크기 조정시 계산되지 않습니다.
이 당신의 .layer { position: absolute; }에서 온다.
절대 위치를 사용하는 경우 부모 위치에 항상 상대 위치를 설정해야합니다. 그렇지 않으면 많은 문제가 발생할 수 있습니다. 귀하의 경우에는
, 그냥이 CSS를 추가
.layers_group {
position: relative;
}
예 :
$(function() {
$(".live_resizable").resizable();
$(".live_draggable").draggable();
});.main {
position:absolute;
right:25px;
left: 25px;
top: 25px;
bottom: 25px; /*200*/
overflow:auto;
border:2px solid red;
}
.layers_group {
position: relative;
}
#stuff {
width: 600px;
}
.layer {
background-color: green;
width: 100px;
height: 100px;
top: 900px;
left: 900px;
cursor:move;
}
/* Jquery to add hangles i think */
.ui-resizable { position: absolute;}
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; background:url(images/corner.gif); }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<div class="main">
<div id="stuff">
<div class="layers_group aaasdasd">
<div class="live_draggable live_resizable layer"></div>
</div>
</div>
</div>그런 어리석은 실수는 tho에 감사한다, 나는 잠시 동안 strugeling하고 있었다 그것의 jQuery의 문제. 다시 한번 감사드립니다. 즐겁게 +50;) – Kivylius
제한 동작을 적용해야합니다. 이 here
편집을 확인하십시오 라이브 데모 : http://jsfiddle.net/JTTYM/51/
이 http://jsfiddle.net/JTTYM/26/을 가지고 빨간색 컨테이너 (오버플로 스크롤) 외부에있는 내부 녹색 상자를 고정 할 수 있습니까? 예 : 드래그 앤 드롭으로 측면으로 끌어 올 수 있지만 크기가 정해지면 오버플로 위치를 죽이지는 않습니다. 나는 그 때 당신에게 당신의 대답을위한 점을 줄 것이다 :) – Kivylius
나는 그것을 편집한다, 여기에서 그것을 점검해라. http://jsfiddle.net/JTTYM/51/ –
내가 문제를 재현 할 수 있습니다. 녹색 상자를 오버플로없이 모서리로 드래그 한 다음 첫 번째 이미지에 표시하는 것처럼 크기를 조정하면 빨강 상자 바깥 쪽에서도 크기가 올바르게 조정됩니다. – Alvaro
Ok, 아마도 문제를 잘못 설명했습니다.이 URL로 이동 : http://jsfiddle.net/JTTYM/52/ 스크롤하여 녹색 상자를 찾은 다음 크기를 조정하십시오. 크기가 조절되면 오버플로 스크롤 막대가 사라집니다. 위에서 말했듯이 오버플로 값은 크기 조정시 계산되지 않습니다. – Kivylius