[jquery] jQuery draggable이 페이지 스크롤 후 잘못된 위치에 도우미를 표시합니다.

개발중인 작업 계획 시스템에 jQuery 드래그드롭 가능을 사용 하고 있습니다. 사용자는 작업을 다른 날짜 또는 사용자로 끌어 놓은 다음 ajax 호출을 사용하여 데이터를 업데이트합니다.

메인 페이지를 아래로 스크롤 할 때를 제외하고는 모든 것이 잘 작동합니다 (작업은 브라우저 창 하단을 초과하는 큰 주간 플래너에 나타납니다). 여기에서 드래그 할 수있는 요소를 드래그하면 마우스 커서 위에 요소가 아래로 스크롤 한 것과 동일한 양의 픽셀이 나타납니다. 호버 상태는 여전히 잘 작동하고 기능은 작동하지만 제대로 표시되지 않습니다.

jQuery 1.6.0 및 jQuery UI 1.8.12를 사용하고 있습니다.

추가해야 할 오프셋 기능이 있다고 확신하지만 적용 할 위치 또는 더 나은 방법이 있는지 모르겠습니다. 내 .draggable()초기화 코드는 다음과 같습니다 .

$('.job').draggable({
  zIndex: 20,
  revert: 'invalid',
  helper: 'original',
  distance: 30,
  refreshPositions: true,
});

이 문제를 해결하기 위해 무엇을 할 수 있는지 아십니까?



답변

이것은 관련 버그 보고서 일 수 있으며 꽤 오랫동안 사용되었습니다. http://bugs.jqueryui.com/ticket/3740

내가 테스트 한 모든 브라우저 (Chrome, FF4, IE9)에서 발생하는 것 같습니다. 이 문제를 해결할 수있는 몇 가지 방법이 있습니다.

1.position:absolute; 귀하의 CSS에서 사용하십시오 . 절대적으로 배치 된 요소는 영향을받지 않는 것 같습니다.

2. 부모 요소 (본문 인 경우 이벤트)가 overflow:auto;설정 되었는지 확인합니다 . 내 테스트에 따르면이 솔루션은 위치를 수정하지만 자동 스크롤 기능을 비활성화합니다. 여전히 마우스 휠이나 화살표 키를 사용하여 스크롤 할 수 있습니다.

3. 위의 버그 리포트에서 제안한 수정 사항을 수동으로 적용하고 다른 문제가 발생하는지 철저하게 테스트합니다.

4. 공식 수정을 기다립니다. 과거에 몇 차례 연기되었지만 jQuery UI 1.9로 예정되어 있습니다.

5. 모든 브라우저에서 발생한다고 확신하는 경우 이러한 해킹을 영향을받는 드래그 가능 항목의 이벤트에 넣어 계산을 수정할 수 있습니다. 하지만 테스트 할 다른 브라우저가 많으므로 최후의 수단으로 만 사용해야합니다.

$('.drag').draggable({
   scroll:true,
   start: function(){
      $(this).data("startingScrollTop",$(this).parent().scrollTop());
   },
   drag: function(event,ui){
      var st = parseInt($(this).data("startingScrollTop"));
      ui.position.top -= $(this).parent().scrollTop() - st;
   }
});


답변

이 솔루션은 아무것도 위치를 조정하지 않고 작동합니다. 요소를 복제하고 절대 위치를 지정하기 만하면됩니다.

$(".sidebar_container").sortable({
  ..
  helper: function(event, ui){
    var $clone =  $(ui).clone();
    $clone .css('position','absolute');
    return $clone.get(0);
  },
  ...
});

도우미는 드래그 할 DOM 요소를 반환해야하는 함수일 수 있습니다.


답변

이것은 나를 위해 일했습니다.

start: function (event, ui) {
   $(this).data("startingScrollTop",window.pageYOffset);
},
drag: function(event,ui){
   var st = parseInt($(this).data("startingScrollTop"));
   ui.position.top -= st;
},


답변

다른 답변을 써서 죄송합니다. 위 답변의 솔루션 중 어느 것도 사용할 수 없으므로 다른 합리적인 솔루션을 찾기 전에 많은 인터넷 검색을 수행하고 많은 실망스러운 사소한 편집을 수행했습니다.

이 문제는 때마다 발생하는 것 같습니다 어떤 부모 요소가있다 position‘상대’로 설정. 마크 업을 재구성하고 CSS를 변경해야했지만 모든 부모로부터이 속성을 제거함으로써 .sortable()모든 브라우저에서 제대로 작동 할 수있었습니다 .


답변

이 버그는 매우 자주 발생하며 매번 다른 솔루션이있는 것 같습니다. 위의 어느 것도 또는 인터넷에서 찾은 다른 어떤 것도 작동하지 않았습니다. jQuery 1.9.1 및 Jquery UI 1.10.3을 사용하고 있습니다. 이것이 내가 수정 한 방법입니다.

$(".dragme").draggable({
  appendTo: "body",
  helper: "clone",
  scroll: false,
  cursorAt: {left: 5, top: 5},
  start: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  },
  drag: function(event, ui) {
    if(! $.browser.chrome) ui.position.top -= $(window).scrollTop();
  }
});

FF, IE, Chrome에서 작동하지만 다른 브라우저에서는 아직 테스트하지 않았습니다.


답변

오버플로를 삭제합니다.

html {overflow-y: scroll; background: #fff;}

그리고 완벽하게 작동합니다!


답변

이 버그는 http://bugs.jqueryui.com/ticket/6817 로 옮겨졌으며 , 약 5 일 전 (2013 년 12 월 16 일 또는 그 전후)에 마침내 수정 된 것으로 보입니다. 현재 권장 사항은 http://code.jquery.com/ui/jquery-ui-git.js 의 최신 개발 빌드를 사용 하거나이 수정 사항이 포함 된 버전 1.10.4를 기다리는 것입니다 .

편집 :
이 수정 사항은 이제 버전 1.11까지 삭제되지 않는 http://bugs.jqueryui.com/ticket/9315의 일부일 수 있습니다 . 위의 링크 된 소스 제어 버전의 jQuery를 사용하면 저와 @Scott Alexander (아래 주석)의 문제가 해결되는 것 같습니다.