jQuery UI draggable로 HTML5 대화 상자 요소 문제가 발생했습니다.

Question

jQuery UI가 드래그 가능한 HTML5 대화 상자 요소에 문제가 있습니다. 드래그 할 수있게 한 후에 대화 상자를 드래그하면 마우스 포인터가 dilaogbox에서 빠져 나옵니다.

이 코드는 jsfiddle 코드를 참조하십시오.

firefox가 대화 요소를 지원하지 않으므로 Chrome 브라우저에서 확인하시기 바랍니다.

Answer 1

드래그 기능 자체를 향상시킬 것이라고 생각하지 않습니다. 코드가 움직임을 식별하기에 충분한 간격을 기다려야하므로 드래그 지연이 어느 정도 발생합니다. delay의 기본값은 0입니다 (1.12에서는 더 이상 사용되지 않습니다).

저는 이것이 수정 가능할 것이라고 생각하지 않습니다.

나는 당신이 그것을 묻지 않았다는 것을 알고 있지만, 여기서 크로스 브라우저 테스트가 있습니다. 각 브라우저와 각 솔루션을 볼 수 있습니다.이 문제는 마우스가 움직임 이전에 요소 경계 밖으로 벗어날 수있는이 문제를 가지고 있습니다. 요소 중 하나가 따라 잡을 수 있습니다.

시험 예 : http://fiddle.jshell.net/Twisty/ghn5tje1/

CSS

dialog { 
    margin: 0; 
} 

.no-titlebar .ui-dialog-titlebar { 
    display: none; 
} 

jQuery를

$(function() { 
    var dialog; 
    if (typeof HTMLDialogElement === 'function') { 
    dialog = $('dialog'); 
    dialog[0].show(); 
    $("#draggable").draggable(); 
    } else { 
    var newDiag = $("<div>", { 
     id: "draggable" 
    }).css("padding", "1em").dialog({ 
     dialogClass: "no-titlebar", 
     resizable: false, 
     minWidth: "1em", 
     minHeight: "1em", 
     draggable: false 
    }); 
    newDiag.parent().draggable(); 
    var content = $("#draggable").html(); 
    $("#draggable").remove(); 
    dialog = newDiag.html(content).dialog("open"); 
    } 
}); 

당신은 다른 브라우저에서이를 테스트하고 각각의 다양한 응답 시간을 볼 수 있습니다.