목록을 고정할 때 정렬이 작동하지 않습니다

7462 단어 jquery-sortable
안녕하세요.
bootstrap 탭이 있는 플러그인을 사용할 때 문제가 발생했습니다.
이 플러그인은 페이지 맨 위에서 정상적으로 작동하지만, 페이지를 스크롤할 때 미친 듯이 변합니다.

묘사

pullPlaceholder로 설정하면 자리 표시자가 제대로 생성되지 않고 정의되지 않아 오류가 발생합니다. false로 설정하면 항상 목록 맨 아래에 자리 표시자가 있습니다.
코드를 이해하고 디버깅하는 데 많은 시간을 들인 후에 저는 이곳에 왔습니다.
https://github.com/johnny/jquery-sortable/blob/master/source/js/jquery-sortable.js#L434
이것은 l이 true일 때 목록의 편이 요소를 HTML 표시로 복원합니다
가입:
      if(el.css("position") === "relative" || el.css("position") === "absolute" || el.css("position") === "fixed")
... 모든 것이 고정되어 있다.
포크와pull을 사용하고 싶지만 루비 도구체인에 익숙하지 않아서 작업할 때 설치할 수 없습니다.가능하다면 수리해 주시겠어요?
플러그인 고맙습니다. fixed 테스트가 부족합니다.몇 가지 경우 자리 표시자를 사용할 수 없습니다
올바른 포지셔닝:
- 고정 위치

토론 #1

- 항목 이동
- 자리 표시자가 정상적으로 작동합니다.
- 정확한 물품 재주문
- 페이지 아래로 스크롤, 붙여넣기 위치static- 항목 이동
- 자리 표시자가 위치해야 할 위치 위에 표시됩니다.
- 항목 순서재정리 오류
같은 일이 거꾸로 발생한다.
- 페이지 로드, 아래로 스크롤, 붙여넣기 위치fixed- 항목 이동
- 자리 표시자가 정상적으로 작동합니다.
- 정확한 물품 재주문
- 페이지 위로 스크롤, 붙여넣기 위치fixed- 항목 이동
- 자리 표시자가 위치해야 할 위치 위에 표시됩니다.
- 항목 순서재정리 오류
플러그인을 호출하는 코드는 다음과 같습니다.
  this.$('.sidebar-affix').addClass('sortable-list').sortable({
    group: 'tm-dossier-menu',
    handle: 'i.icon-move',
    onDrag: function (item, position, _super) {
      position.left -= item.innerWidth() - 23
      item.css(position)
    },
    onDrop: function (item, targetContainer, _super) {
      var clonedItem = $('<li/>').css({height: 0})
      item.before(clonedItem)
      clonedItem.animate({'height': item.height()})

      item.animate(clonedItem.position(), function() {
        clonedItem.detach()
        _super(item)
        that.menuDragEnded()
      })
    }
  })
나는 이것이 직위의 변화와 관련이 있다고 생각한다
어딘가에 캐시되어 있다.이따가 다시 볼게요...빌어먹을static 나는 이미 타협을 이루어서 나의 사례를 일하게 했지만 해결 방안이 좋은 플러그인으로서 하나의 전체가 되는지 모르겠다. 왜냐하면 나는 다른 테스트 용례를 실행할 수 없기 때문이다.
어쨌든, 나는 당신이나 다른 같은 문제를 발견한 개발자에게 유용하도록 이 자리에서 그것을 진술할 것입니다.
앞서 언급한 수정 사항을 제외하고는
부모 오프셋 요소로 돌아갈 때 추가

토론 #2

검사
jquery-sortable#L434
  if(el.css("position") === "relative" || el.css("position") === "absolute" || el.css("position") === "fixed")
우리는 또 다른 변화가 필요하다.
드래그를 초기화할 때 캐시의 오프셋 부모 대상을 지웁니다. 왜냐하면fixed 변경된 자리 표시자 위치가 작동하지 않음
예기
jquery-sortable#L294-301
  getOffsetParent: function  () {
    if(this.offsetParent === undefined){
      var i = this.containers.length - 1,
      offsetParent = this.containers[i].getItemOffsetParent()

      while(i--){
        if(offsetParent[0] != this.containers[i].getItemOffsetParent()[0]){
          // If every container has the same offset parent,
          // use position() which is relative to this parent,
          // otherwise use offset()
          $document.on("scroll", this.scrolledProxy)
          offsetParent = false
          break;
        }
      }
      this.offsetParent = offsetParent
    }
    return this.offsetParent
  },
+ clearOffsetParent: function() {
+   this.offsetParent = undefined;
+ },
  setPointer: function (e) {
    var pointer = {
      left: e.pageX,
      top: e.pageY
    }

+   this.clearOffsetParent()
    if(this.getOffsetParent()){

      var relativePointer = getRelativePosition(pointer, this.getOffsetParent())
      this.lastRelativePointer = this.relativePointer
      this.relativePointer = relativePointer
    }

    this.lastPointer = this.pointer
    this.pointer = pointer

    return true
  },
플러그인에 다시 한 번 감사드립니다.나는 이 모든 것이 너에게 도움이 되기를 바란다. position 자세한 글쓰기와 해결 방안을 제시해 주셔서 감사합니다.불행하게도, 당신의 해결 방안은 상당히 많은 DOM 상호작용을 필요로 합니다.나는 그것을 최후의 수단으로 삼을 것이다.
문제를 해결하는 또 다른 방법은 다음과 같습니다.
프로젝트 용기를 직접 복구하지 말고 프로젝트 용기를 포함하는div를 복구합니다.그런 다음 프로젝트 컨테이너에 상대/절대 위치를 설정할 수 있습니다.
드래그한 항목을 찾기 위해 CSS translate를 사용하고 있습니다.이것은 너의 상자를 열면 바로 사용할 용례에 적용될 것이다.

토론 #셋

나는 오프셋 부모 대상의 위치 값의 변화를 측정하기 위해 검사를 추가했다.만약 당신이 이것이 당신의 문제를 해결했는지 보고할 수 있다면

토론 #4

다행이다. 내일 검사를 해 보겠습니다. 다시 보고하겠습니다.

토론 #5

헤이,
나는 방금 검사를 한 번 해 보았는데, 결과의 차이가 많지 않아 결국 실패했다.
tmp
이런 상황은 여전히 같은 방식으로 발생한다.
- 고정 위치

토론 #6

- 항목 이동
- 자리 표시자가 정상적으로 작동합니다.
- 정확한 물품 재주문
- 페이지 아래로 스크롤, 붙여넣기 위치static- 항목 이동
- 자리 표시자가 위치해야 할 위치 위에 표시됩니다.
- 항목 순서재정리 오류
그러나 다른 경우는 다릅니다. (새 비헤이비어에서 굵게 표시됨)
- 페이지 로드, 아래로 스크롤, 붙여넣기 위치fixed- 항목 이동
- 자리 표시자가 정상적으로 작동합니다.
- 정확한 물품 재주문
- 페이지 위로 스크롤, 붙여넣기 위치fixed- 항목 이동
- 자리 표시자 작동 중~~ 자리 표시자 위치에서 ~~
- 항목 순서 재정리 정답~~ 항목 순서 재정리 오류~~
- 페이지 아래로 스크롤, 붙여넣기 위치static- 항목 이동
- 자리 표시자가 있어야 할 위치 아래에 표시됩니다.
- 항목 순서재정리 오류
나는 시간을 써서 사례 하나를 준비했다.여기서 zip 파일 다운로드
사이트 주소:
https://docs.google.com/file/d/0B9Ey2GiKzNTCUFQ0eG4wZkxtNWM/edit?usp=sharing
그것은 간단한 색인을 포함한다.html 반압축 해제 안내 프로그램 문서
접미사가 하나 있다.fixed 화면에서 이 두 구성 요소의 초기화 코드를 볼 수 있습니다
접두사와 jquery는 플러그인을 정렬할 수 있습니다.js 폴더에서 찾을 수 있습니다js/app.js 현재 마스터에서 가져오기
ajquery-sortable.js 내가 위에서 제기한 수정이 있다
효과가 있는 것 같다.
이것은 너로 하여금 이 사례를 재현하게 할 수 있을 것이다.이동 핸들로 메뉴 항목 드래그
만약 당신이 그것을 가지고 있거나, 혹은 당신이 나를 다른 곳에 업로드하게 하고 싶다면, 나에게 알려 주세요.시작하다
현재 내 드라이브 계정은 나중에 삭제할 것이다.jquery-sortable-modified.js 그래서 한 가지 방식은 효과가 있고 다른 한 가지 방식은 없습니다. 예시 사례를 준비해 주셔서 감사합니다.조사해 보겠습니다

토론 #7

. 이제 될 것 같습니다.나는 너의 해결 방안을 사용했지만, 스크롤과 하강 중에만 제거했다.
드래그 과정에서 스크롤하고 위치 값이 바뀌면 문제가 온화한 형태로 지속됩니다.마우스를 이동하지 않으면 항목의 위치가 정확하지 않습니다.
스크롤 이벤트에 무의미한clientX/Y 값이 없기 때문에 복구되지 않습니다. (적어도 ff와 크롬에서는)
따라서 상술한 해결 방안을 추천합니다

Another solution to your problem would be as follows: Do not fix the item container directly, but fix a div containing the item container. Then you can set a relative/absolute position on the item container.

토론 #8

복구해 주셔서 감사합니다.1:
내 경우, 고정되어 있기 때문에, 스크롤 상자가 있을 때 마우스가 머무르기 때문에 이것은 문제가 되지 않는다.
대답도 고마워요.너는 가능한 한 빨리 라벨을 만들 수 있니?

토론 #9

저는 먼저 문제를 끝내려고 합니다.하면, 만약, 만약...
일요일에 나는 새로운 버전을 발표할 것이다.
2013년 2월 28일 목요일 01:17:43-0800
화금[email protected]쓰기:

Thanks for the fix, works great! :+1:

In my case since it is fixed, when scrolling the box stays with the mouse, so that is not a problem.

Also thanks for being this responsive. Will you make a tag soon enough?


Reply to this email directly or view it on GitHub: https://github.com/johnny/jquery-sortable/issues/7#issuecomment-14224011

좋은 웹페이지 즐겨찾기