jQuery UIのドラッグ可能な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"); 
    } 
}); 

あなたは別のブラウザでこれをテストし、それぞれの様々な応答時間を見ることができます。