I’m having some issues with my website. To explain briefly, I have a feature to edit posts where I allow users to rearrange the order of images within the post by dragging and dropping. To prevent scrolling interference during dragging, I added overflow: hidden to the body tag to prevent scrolling up or down. Everything works fine on desktop, Mac, and Android platforms, but it’s not effective on mobile safari.
I’ve tried various solutions found on Stack Overflow such as adding <head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1">
or adding CSS html, body {position: relative, overflow: hidden}, but none of them have been effective.
on mac when i start dragging the body overflow was hidden
On Safari iOS on my phone, when I start dragging an image, if I drag upwards, my screen scrolls up, and if I drag downwards, it scrolls down. This affects the ability to adjust the position of the images because my screen keeps moving up and down, making it impossible to drag the images to the desired position.
my js for sort the image when dragging
function touchHandler(event) {
var touch = event.changedTouches[0];
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent({
touchstart: "mousedown",
touchmove: "mousemove",
touchend: "mouseup"
}[event.type], true, true, window, 1,
touch.screenX, touch.screenY,
touch.clientX, touch.clientY, false,
false, false, false, 0, null);
touch.target.dispatchEvent(simulatedEvent);
// event.preventDefault();
}
function init() {
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
function unInit() {
document.removeEventListener("touchstart", touchHandler, true);
document.removeEventListener("touchmove", touchHandler, true);
document.removeEventListener("touchend", touchHandler, true);
document.removeEventListener("touchcancel", touchHandler, true);
}
init();
// ソート機能
function sortContent(_elm, callback = null) {
if ($(_elm).length) {
var _listArray = [];
for (var _i = 0; _i < $(_elm).find('.sort_item').length; _i++) {
_listArray[_i] = $(_elm).find('.sort_item').eq(_i).attr('id').replace('list_', '');
}
$(_elm).sortable({
'start': function () {
// $('body').css('overflow', 'hidden');
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
$('html, body').css({'position': 'relative', 'overflow': 'hidden'});
}
document.ontouchmove = function (e) {
e.preventDefault();
};
},
"opacity": 0.5, // ドラッグ中の透明度
"update": function (event, ui) { // ドラッグ完了後のコールバック
for (var _i = 0; _i < $(_elm).find('.sort_item').length; _i++) {
var _sort = $(_elm).find('.sort_item').eq(_i).attr('id').replace('list_', '');
_listArray[_i] = _sort;
}
var numberOrder = 1;
$('.ui-sortable .sort_item').each(function () {
$(this).find('.order-number').text(numberOrder);
numberOrder++;
});
},
'stop': function () {
// $('body').css('overflow', 'auto');
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
$('html, body').css('overflow', 'auto');
}
document.ontouchmove = function () {
return true;
};
}
});
}
}
sortContent('.list_images_wrapper .list_images > ul');