2010-05-05 4 views
9

jQuery sortable plugin (2 개의 연결된 목록)으로 작업 중이며 이상한 버그가 있습니다. 당신이 사진을 드래그하면 마우스가 드래그 된 항목 위에Jquery sortable stange mouse offset

스크린 샷 : 목록 중 하나에 대한 http://img408.imageshack.us/i/mouseb.png/

HTML을

<ul class="flickr_key_ul ui-sortable">  
      <li><img style="display: inline;" src="http://farm3.static.flickr.com/1039/548804108_a8816f42f5_s.jpg" alt="Up the Ginnel" title="Up the Ginnel" class="flickr_image"></li> 
      <li><img style="display: inline;" src="http://farm3.static.flickr.com/1116/548804090_7e625a461b_s.jpg" alt="Down the Ginnel" title="Down the Ginnel" class="flickr_image"></li> 
      <li><img style="display: inline;" src="http://farm3.static.flickr.com/1011/548804074_75f2c0bd0e_s.jpg" alt="Entering the Ginnel" title="Entering the Ginnel" class="flickr_image"></li> 
      <li><img style="display: inline;" src="http://farm3.static.flickr.com/1345/548804064_6023b070a7_s.jpg" alt="Up Bachelor Lane" title="Up Bachelor Lane" class="flickr_image"></li> 

      <li><img style="display: inline;" src="http://farm3.static.flickr.com/1183/548804020_3116d900ce_s.jpg" alt="Down Bachelor Lane" title="Down Bachelor Lane" class="flickr_image"></li> 
      <li><img style="display: none;" src="http://farm3.static.flickr.com/1325/548771897_0a32a6492a_s.jpg" alt="Flower" title="Flower" class="flickr_image"></li> 
      <li><img style="display: none;" src="http://farm3.static.flickr.com/1411/548771891_e37de6bcc0_s.jpg" alt="Steps" title="Steps" class="flickr_image"></li> 
      <li><img style="display: none;" src="http://farm3.static.flickr.com/1424/548771883_23a4909300_s.jpg" alt="Hopwood Bridle Way" title="Hopwood Bridle Way" class="flickr_image"></li> 
      <li><img style="display: none;" src="http://farm3.static.flickr.com/1350/548771867_beaf20476b_s.jpg" alt="Cat, Sleeping" title="Cat, Sleeping" class="flickr_image"></li> 
      <li><img style="display: none;" src="http://farm3.static.flickr.com/1393/548771853_af19a5dac2_s.jpg" alt="Road Cones, Hiding" title="Road Cones, Hiding" class="flickr_image"></li> 
    </ul> 

정렬 구성 :

horizontal: { 
      helper: "clone", // Instead of dragging the real image a copy will be dragged 
      connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected 
      cursor: 'pointer', //change the cursor when dragging 
      appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped 
      containment: rootel, //Make sure the user can't drag the images outside the widget 
      revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position 
      zIndex: 9999 
     }, 

누구든지 방법을 알고 중간에 뭐가 생겼나요? 에 {디스플레이 : 인라인} {왼쪽 부동}에서 왼쪽 정렬을 변경하는 경우

+0

내가 비슷한 문제를 가지고 있지만 드래그 항목은 마우스의 오프셋 (offset) 상단에 있습니다. – cometta

답변

20

시도 (cursorAt이 작동하지 않습니다). 해결책은 다음과 같습니다

cursorAt: { top: 0, left: 0 } 

이 정렬 및 드래그 모두 작동합니다

$("#someid").draggable({cursorAt: { top: 0, left: 0 },...}) 
$("#someid").sortable({cursorAt: { top: 0, left: 0 },...}) 
+0

고마워요! 나는이 문제에 부딪 쳤고 당신의 수정은 매력처럼 작동했습니다! – Bryan

+0

링크 된 목록에 적용됩니까? – GRGodoi

+0

Simple, briliant =) – M05Pr1mty

4

내가 오프셋 마우스 포인터와 같은 문제가 있었이

horizontal: { 
     helper: "clone", // Instead of dragging the real image a copy will be dragged 
     connectWith: ["#flickr_sidebar ul"], // To be able to drag and drop an image to another image gallery they need to be connected 
     cursor: 'pointer', //change the cursor when dragging 
     cursorAt: { cursor: "move", top: 6, left: 275 }, 
     appendTo: 'body', //When dropped the images need to be appended to the image gallery where they are dropped 
     containment: rootel, //Make sure the user can't drag the images outside the widget 
     revert: true, // if the user releases the image ouside the dropbox it'll return to it's original position 
     zIndex: 9999 
    }, 
+0

비슷한 문제가있었습니다. appendTo : 'body'가 그것을 해결했습니다. –