1
私はマウスとタッチ入力の両方で動作するjavascriptのドラッグ可能な操作に取り組んでおり、には依存性がありません。これまでのところ、それはデスクトップや携帯電話でうまく動作します。 Android版Firefoxの場合を除きページスクロール後のAndroid用Firefoxでドラッグ可能な対話が壊れた
は、次の動作を示しています
- ページがスクロールされていません：罰金
- ページが縦方向にスクロールさ：要素は、水平方向にのみ
- ページが水平方向にスクロールされてドラッグすることができます：要素を垂直方向にのみドラッグすることができます
- ページは垂直方向と水平方向にスクロールされます：要素は は戻って非常にトップにすべての
- スクロールページにドラッグし、左：要素が再び期待
コードとしてドラッグすることができます。もう一度
var evtStart, evtMove, evtEnd;
if ('ontouchend' in window) {
evtStart = 'touchstart';
evtMove = 'touchmove';
evtEnd = 'touchend';
} else {
evtStart = 'mousedown';
evtMove = 'mousemove';
evtEnd = 'mouseup';
}
// BASIC DRAGGABLE INTERACTION
// No further configuration, just drags ....
var panel = document.querySelector('.testpanel');
panel.addEventListener(evtStart, function(e) {
e.preventDefault();
var styles = window.getComputedStyle(panel),
left = parseFloat(styles.left), // css left on mousedown
top = parseFloat(styles.top), // css top on mousedown
psx = e.pageX || e.touches[0].pageX, // pointer x on mousedown
psy = e.pageY || e.touches[0].pageY; // pointer y on mousedown
// function actually draging the elmt
var drag = function (e) {
e.preventDefault();
var pmx = e.pageX || e.touches[0].pageX, // current pointer x while pointer moves
pmy = e.pageY || e.touches[0].pageY; // current pointer y while pointer moves
panel.style.left = left + (pmx - psx) + 'px'; // set new css left of elmt
panel.style.top = top + (pmy - psy) + 'px'; // set new css top of elmt
};
panel.addEventListener(evtMove, drag);
panel.addEventListener(evtEnd, function() {
panel.removeEventListener(evtMove, drag);
});
});
、それは動作しますAndroid用のFFを除き、デスクトップと携帯では問題ありません。
なぜAndroid用FFで動作しないのですか？私のコードの中に何か、それともFFのバグですか？これまでのところ私は役に立たないものは見つけられませんでした。
私は非常に助けていただければ幸いです。