droppable (빈 타임 슬롯)과 draggables (계획 항목)로 구성된 일정 그리드로 동적으로로드합니다. 내 문제는 내가 페이지 아래로 스크롤 한 후 드래그 가능 선택이 커서 (또는 처음 위치였던 위치)에 나타나지 않고 아래로 스크롤 한 것과 같은 양만큼 위쪽으로 이동한다는 것입니다. (이미지 참조 : 마우스 커서는 15시에, 화면은 드래그 가능한 곳으로 이동합니다)윈도우 스크롤 후 jQuery - draggable 위치 문제
비슷한 행동을 일으키는 버그가있었습니다. 그러나 최근 버전의 jQuery (2.2.4) 및 jQuery UI (1.12.1)를 사용합니다. 또한 나는이 스레드를 건너 왔어요 :
jQuery draggable shows helper in wrong place after page scrolled
그리고 나는 그것이 바로 위치 얻을 수있는 모든 해킹을 시도했습니다. 그러나 아무 소용이 없습니다. 내 콘솔이 draggable의 오른쪽 위/왼쪽 좌표를 표시 할 때도. 내 화면에서 여전히 잘못된 위치에 있습니다.
또한 Mac Chrome v58에서는 이러한 동작이 발생하지 않지만 v62에서는 나타나기 시작했습니다. (어쩌면 내가 각 버전을 사이에 테스트하지 않았 더라면). Mac의 Firefox 이전 버전에도 동일하게 적용됩니다. 또한 Safari 9.1.2 (11601.7.7)에서도 잘 작동합니다.
페이지가 부트 스트랩 형식입니다. 일정 내용이 div 안에로드됩니다.
<div id="content"></div>
낙하 할은 scheduleWeek 아이디의 추가됩니다 :
<div class="row">
<div class="col-xs-6 nopadding">
<div id="scheduleWeek1" class="col-xs-3 nopadding">
<!-- TIMESLOTS WEEK #1 -->
</div>
<div id="scheduleWeek2" class="col-xs-3 nopadding">
<!-- TIMESLOTS WEEK #2 -->
</div>
<div id="scheduleWeek3" class="col-xs-3 nopadding">
<!-- TIMESLOTS WEEK #3 -->
</div>
<div id="scheduleWeek4" class="col-xs-3 nopadding">
<!-- TIMESLOTS WEEK #4 -->
</div>
</div>
Draggables는 droppables에 추가됩니다 그냥 표준 jQuery를 활성화됩니다
$(".ui-draggable").draggable({
snap: ".droppable",
snapMode: "inner",
opacity: .4,
cursor:'move'
});
.ui-draggable
{
width: 100%;
height: 30px;
padding: 0;
position:absolute;
margin: 0;
z-index:2;
border: 1px solid;
}
.droppable {
width: 100%;
height: 30px;
padding: 0px;
float: left;
margin: 0px;
border-top: 1px dashed;
border-left: 1px dashed;
border-top: 1px dashed;
background:#FFF;
});
