jQuery draggables (Chrome)의 이상한 동작을 설명하십시오

Chrome을 사용하는 jQuery UI 드래그 가능한 요소의 이상한 동작이 나타납니다. 아래 코드에서 두 개의 색상 블록을 만들고 브라우저 창에서 드래그 할 수 있습니다. 사용해보십시오 here. 모든 IE8과 FF3를 사용하여 잘 작동하지만 크롬 두 나쁜 일이 일어날 : 당신도 블록을 클릭하면jQuery draggables (Chrome)의 이상한 동작을 설명하십시오

는 커서가 I 형이된다. 참고 사항이 페이지에 텍스트가 없습니다!
상단에 한 블록 오른쪽에 놓습니다 (초록색이 위에 있습니다). 지금 블록을 클릭하고 드래그하십시오. 커서는 no symbol, 으로 바뀌지 만 계속 드래그 할 수 있습니다. 이제 가자. 블록이 삭제되는 대신 마우스 버튼이 이제 최대이지만 여전히 까지 드래그됩니다.

이것은 way처럼 간단하지만 Chrome 또는 jQuery를 깨뜨리는 것 같습니다.
내가 누락 된 것이 있습니까?

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> 

    <script> 
     $(function() { 
      $('<div>').addClass( 'redsquare').appendTo('body').draggable({ grid: [24, 24] }) 
      $('<div>').addClass('greensquare').appendTo('body').draggable({ grid: [24, 24] }) 
     }); 
    </script> 

    <style> 
     body { 
      margin: 0 0 0 0; 
     } 

     .redsquare { 
      position: absolute; 
      top: 48; left: 48;   
      width: 24px; 
      height: 24px; 
      background-color: Red; 
     }    

     .greensquare { 
      position: absolute; 
      top: 48; left: 96;   
      width: 24px; 
      height: 24px; 
      background-color: Green; 
     }    
    </style> 

</head> 
<body> 
</body> 
</html>

출처

2010-12-22 I. J. Kennedy

분명히 jQuery UI 1.8.6에서 수정 된 jQuery UI의 버그. 1.7.2를 사용하고 있습니다. 그것은 선택을 중단하지 않은

참조 게시물 :
http://forum.jquery.com/topic/chrome-text-select-cursor-on-drag
http://bugs.jqueryui.com/ticket/4163

하나의 솔루션 :

$(".ui-draggable").each(function() { 
    this.onselectstart = function() { return false; }; 
});

출처

2010-12-22 21:07:01 simshaun

링크 만 작은 텍스트 커서 문제를 해결하지만, jQuery UI 1.8.6으로 업데이트하면 두 가지 문제가 모두 수정되었습니다. 감사! –

두 문제 모두 선택 이벤트로 인해 발생했다고 생각합니다. 한 블럭을 클릭 할 때, 당신이 무언가를 선택한다고 생각했기 때문에 (왜 I-beam 커서를 보여줄 까?) 하나의 블록이 다른 블록 위에 있고 드래그하려고했을 때, 여전히 당신이 무언가를 선택하려한다고 생각했습니다. 웬일인지, 나는 그것이 선택 이벤트를 멈추게했다고 생각하지 않는다. 그것은 당신이 놓아 줄 때조차도 여전히 커서를 따라가는 이유였다. 다행스럽게 업그레이드하자! – simshaun

+1에 대한 해결책은 http://bugs.jqueryui.com/ticket/4163에 나와 있습니다. 놓으면 document.onselectstart = function() {false false; }; 드래그 가능한 "start"메소드에서 다음 document.onselectstart = function() {}; "stop"메쏘드에서, 크롬이 드래그하는 동안 아무 곳에서나 그것을 선택할 때 그것을 고정시킵니다. – UpHelix

jQuery draggables (Chrome)의 이상한 동작을 설명하십시오

답변

관련 문제