목록을 고정할 때 정렬이 작동하지 않습니다
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.)