0
これは小さな質問かもしれません。しかし、私はこれの理由を見つけることができませんでした。私はそれをドラッグしてdivの位置を変更するためのスクリプトを作った。コードはクロムブラウザで正常に動作しています。 Firefox上でテストしようとすると動作しません。Chromeでのみ動作するJavaScriptスクリプトで、Firefoxでは動作しません。 （divをドラッグするスクリプト）
var h = window.innerHeight|| document.documentElement.clientHeight || document.body.clientHeight;
window.onload = function() {
// ------------------lock the div with mouse pointer--------------
// variable dragged is for identified that you are click on the button or not
var dragged = false,
y = 0,pointerDis = 0,
boxElement = document.getElementById('drag'),
drgElement = document.getElementById('titl');
if (boxElement) {
// -----------------check whether the title div is holding by the mouse to lock it with mouse-------
\t drgElement.addEventListener('mousedown', function() {
\t dragged = true;
pointerDis = event.clientY - parseInt(window.getComputedStyle(boxElement, null).getPropertyValue("top"));
});
//------------------check whether the title div is released to drop the div-------------------------
\t document.addEventListener('mouseup', function() {
\t dragged = false;
});
document.addEventListener('mousemove', function() {
y = event.clientY;
\t if(dragged == true)
\t {
y = y -pointerDis;
if(y<0)
{
y = 0;
}
else if(y > window.innerHeight - boxElement.offsetHeight)
{
y = window.innerHeight - boxElement.offsetHeight;
}
\t \t boxElement.style.top = y + 'px';
\t }
});
}
};.drg {
\t \t \t position: absolute;
\t \t \t top:0;
\t \t \t right: 0;
\t \t \t background: red;
\t \t \t border-top-left-radius: 45px;
\t \t \t border-bottom-left-radius: 45px;
\t \t }
\t \t #titl{
\t \t \t background: blue;
\t \t \t width: 50px;
\t \t \t text-align: center;
\t \t \t color: white;
\t \t \t font-size: 30px;
\t \t \t border-top-left-radius: 10px;
\t \t }
\t \t #det{
\t \t \t background: #f9c500;
\t \t \t width: 50px;
\t \t \t border-bottom-left-radius: 10px;
\t \t \t text-align: center;
\t \t }<!DOCTYPE html>
<html>
<head>
\t <title>test 4</title>
</head>
<body>
<div class = "drg" id="drag">
\t <div id="titl" unselectable="on" onselectstart="return false;">....</div>
\t <div id="det">this is the details menu</div>
</div>
</body>
</html>あなたは青のdivからクリックとドラッグでY軸を通してそれをドラッグすることができます。私はその理由を知らないか、Firefox上でこの作業を修正する方法を見つけることができませんでした。私を助けてください！
の入力として（のMouseMoveまたはマウスダウン）イベントをキャッチする必要があります。イベントは –
^をdefined_されていません。グローバルイベントオブジェクトがFFではサポートされていないため、代わりにイベントオブジェクトを渡してください。また、 'unselectable'は、他のブラウザーでは動作しない、古代のIEの残骸です。 – Teemu
好奇心から離れて、グローバルイベントオブジェクトの使用を学んだことがありますか？それを使用するための1つ以上のオンライン記事がありますか？これは決して標準の一部ではなく、比較的短時間の間もChromeでサポートされています。 – Teemu