jQuery Sortable List Handles on Hover

Question

정렬을위한 핸들 목록이 생성됩니다. 20 개의 핸들을 볼 수있는 미학이 마음에 들지 않으므로 마우스를 목록 항목 위에 놓을 때만 핸들을 표시하려고합니다. 당신이 볼 수 있듯이, 목록에있는 항목 유혹하는 목록 항목의 다소 거슬리는 움직임과 편차를 생성

jsFiddle #1

:

이

내 첫 번째 시도였다. 이 문제를 해결하기 위해 핸들이 보이지 않을 때 핸들을 교체 할 때 사용하는 빈 16px 이미지를 만들었습니다. 그것은 당신이 여기에서 볼 수 있듯이, 유혹보다 훨씬 더 좋은 사용자 경험을 만듭니다

jsFiddle #2

$(this).prepend("<img src=http://i.imgur.com/tzGrVLc.png class=\"blank-sprite\"/width=16 height=16 border=0>"); 

문제는 종종 16px 이미지를 정렬하는 동안 정렬에서 일을 남겨두고 사라는 것이다. (나는 이미지를 게시 하겠지만 명성을 얻지는 못한다.) 항상 그렇게되는 것은 아니지만, 내가 아주 빨리 정렬 할 때 더 자주 일어나는 것처럼 보인다.

왜 이런 일이 일어나고 어떻게 수정해야하는지 알고 싶습니다. 감사!

Answer 1

icon 요소의 position css 속성을 absolute로 설정해야합니다.

SEE DEMO

var $icon = $("<span class=\"ui-icon ui-icon-grip-dotted-vertical\" style=\"display:inline-block\" id=\"handle\" /></span>").css({ 
      position:'absolute', 
      top:$(this).offset().top+5, 
      left:$(this).offset().left-10 
     }); 
$(this).prepend($icon);