목록을 고정할 때 정렬이 작동하지 않습니다
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
헤이,나는 방금 검사를 한 번 해 보았는데, 결과의 차이가 많지 않아 결국 실패했다.
 
 이런 상황은 여전히 같은 방식으로 발생한다.
- 고정 위치
토론 #6
- 항목 이동- 자리 표시자가 정상적으로 작동합니다.
- 정확한 물품 재주문
- 페이지 아래로 스크롤, 붙여넣기 위치
static- 항목 이동- 자리 표시자가 위치해야 할 위치 위에 표시됩니다.
- 항목 순서재정리 오류
그러나 다른 경우는 다릅니다. (새 비헤이비어에서 굵게 표시됨)
- 페이지 로드, 아래로 스크롤, 붙여넣기 위치
fixed- 항목 이동- 자리 표시자가 정상적으로 작동합니다.
- 정확한 물품 재주문
- 페이지 위로 스크롤, 붙여넣기 위치
fixed- 항목 이동- 자리 표시자 작동 중~~ 자리 표시자 위치에서 ~~
- 항목 순서 재정리 정답~~ 항목 순서 재정리 오류~~
- 페이지 아래로 스크롤, 붙여넣기 위치
static- 항목 이동- 자리 표시자가 있어야 할 위치 아래에 표시됩니다.
- 항목 순서재정리 오류
나는 시간을 써서 사례 하나를 준비했다.여기서 zip 파일 다운로드
사이트 주소:
https://docs.google.com/file/d/0B9Ey2GiKzNTCUFQ0eG4wZkxtNWM/edit?usp=sharing
그것은 간단한 색인을 포함한다.html 반압축 해제 안내 프로그램 문서
접미사가 하나 있다.
fixed 화면에서 이 두 구성 요소의 초기화 코드를 볼 수 있습니다접두사와 jquery는 플러그인을 정렬할 수 있습니다.js 폴더에서 찾을 수 있습니다
js/app.js 현재 마스터에서 가져오기a
jquery-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
Reference
이 문제에 관하여(목록을 고정할 때 정렬이 작동하지 않습니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://github.com/johnny/jquery-sortable/issues/7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
                                
                                
                                
                                
                                
                                우수한 개발자 콘텐츠 발견에 전념
                                (Collection and Share based on the CC Protocol.)