jquery UI 스크롤 막대로 끌 때 IE10 버그에서 드래그 가능

Question

IE10을 제외한 모든 브라우저에서 잘 작동하는 드래그 가능한 요소로 div가 생겼습니다. 스크롤 막대로 요소를 드래그하려고하면 문제가 발생합니다. 마우스를 올릴 때까지 스크롤하여 요소가 마우스의 현재 위치에 맞춰집니다.

내가 설정이 바이올린을했습니다 : http://jsfiddle.net/Hhja4/1/

그냥 클릭하고 스크롤 막대 보유하고 가자, IE10을 사용하는 경우. 이제 mousedown이 없는데도 div가 마우스를 따라갈 것이며, 내가 말할 수있는 한 마우스 오른쪽 버튼을 클릭하면 멈출 수있는 유일한 방법입니다. MouseUp 이벤트가되지 않는 것처럼

$('#draggable').draggable().on('mouseup', function() { 
    $('#draggable').trigger({type: 'mousedown', which: 3}); 
}); 

그것은 보일 수있을 것입니다 ..이 때문에

, 나는 오른쪽 마우스 클릭에 대한 드래그 할 수있는 요소에 트리거를 추가하는 시도했지만, 제대로 동작하지 않습니다 ... 불행하게도

$('#draggable').scroll(function() { 
    $('#draggable').trigger({type: 'mousedown', which: 3}); 
}); 

을 마우스 스크롤에 클릭 떨어져 오는 경우 비록 해고, 그래서 이것은 내가 스크롤 이벤트를 사용하여 시도 IE10 버그 것 같다, 내가 찾은 심지어 그 스크롤 이벤트는 마우스 오른쪽 버튼을 클릭 할 때까지 실행되지 않습니다.

이 문제의 해결 방법이 있습니까?

Answer 1

누군가가 여기에 와서 어디에 ".여기이 질문에 대해 논의 draggy "클래스가 아닌 작업 HTML의 예 다음 수정 CSS 클래스의 추가입니다 그것은 :

원본 및 부분 :

<div class="modal-dialog ui-widget-content"> 
<div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-bind="click: closeWindow" aria-hidden="true"></button> 
     <h4><span data-bind="text: title"></span></h4> 
    </div> 

    <div class="modal-body dataGridBody"> 
     <div id="dataGridPanel" class="portlet box xs"> 
      <table id="table" class="standard-grid" data-bind="attr: { 'gridId': id }"></table> 
     </div> 
    </div> 
</div> 

원본과 깨진 자바 스크립트 :

$('.modal-dialog').draggable(); 

---

HTML을 수정 (CSS 클래스 이름 "draggableSection"의 위치를 ​​알이 멀리 갈 스크롤 문제를 얻는 데 중요) :

<div class="modal-dialog ui-widget-content"> 
<div class="modal-content"> 
    <div class="modal-header draggableSection"> 
     <button type="button" class="close" data-bind="click: closeWindow" aria-hidden="true"></button> 
     <h4><span data-bind="text: title"></span></h4> 
    </div> 

    <div class="modal-body dataGridBody"> 
     <div id="dataGridPanel" class="portlet box xs"> 
      <table id="table" class="standard-grid" data-bind="attr: { 'gridId': id }"></table> 
     </div> 
    </div> 
</div> 

올바른 자바 스크립트

$('.modal-dialog').draggable({handle: '.draggableSection'}); 

Answer 2

다른 누구도이 문제를 해결할 수있는 경우를 대비해 해결책을 찾았습니다.

대답은 div에있는 각 요소에 드래그 할 때 사용할 수있는 클래스를 추가하는 것이 었습니다. 나는 draggy 클래스를 사용했다.

그런 다음 해당 클래스를 handle 옵션과 같은 선택기로 사용할 수 있습니다. 이 handle는 드래그 할 수있는 요소의 후손 만 요소를 받아 들일 수 있지만, 분명히 그것은 또한뿐만 아니라 선택기를 받아 들일 수 말한대로

$(document).ready(function() { 
    $('#content\\:pnlPopEmail').draggable({handle: '.draggy'}); 
}); 

이것은 jQuery를 UI의 문서에서 설명되지 않습니다.