Показать сообщение отдельно
  #1 (permalink)  
Старый 13.10.2023, 11:27
Кандидат Javascript-наук
Отправить личное сообщение для sashgera Посмотреть профиль Найти все сообщения от sashgera
 
Регистрация: 20.09.2011
Сообщений: 140

Скролл дива при перетаскивании в нем элементов
Здравствуйте

Есть див с id "dragContainer", в котором динамически создается список li. Список можно перетаскивать мышью.
При перетаскивании элемента li вверх/вниз, нужно начать скроллить див, если li перемещен за пределы высоты дива.
На данный момент скролл работает медленнее, чем перетаскивается элемент.
Пожалуйста, помогите.
JS выполняется не в браузере, а в гаджете Windows. Вот видео - https://youtube.com/shorts/P1FI2xN2Trk
var Drag = {

	obj : null,

	init : function(obj){
		obj.onmousedown	= Drag.start;
		obj.style.pixelTop = 0;
		obj.onDragStart = new Function();
		obj.onDragEnd = new Function();
		obj.onDrag = new Function();
	},

	start : function(e){
		Drag.obj = this;
		e = Drag.fixE(e);
		Drag.obj.lastMouseY = e.clientY;
		document.onmousemove = Drag.drag;
		document.onmouseup = Drag.end;
		return false;
	},

	drag : function(e){
		e = Drag.fixE(e);
		var ey	= e.clientY;
		var y = parseInt(Drag.obj.style.pixelTop);
		var ny = parseInt(y + ey - Drag.obj.lastMouseY);
		Drag.obj.style.pixelTop = ny;
		Drag.obj.style.pixelLeft = 15;
		Drag.obj.lastMouseY	= ey;
		Drag.obj.onDrag(ny, Drag.obj);
		// скролл------------------------------------------------------------------------------------------
		dragContainerHeight = document.getElementById("dragContainer").offsetHeight;
		
		if (dragContainerHeight < Drag.obj.lastMouseY){
			document.getElementById("dragContainer").scrollTop = Drag.obj.lastMouseY - dragContainerHeight;
		}
		// ------------------------------------------------------------------------------------------------
		return false;
	},

	end : function(){
		document.onmousemove = null;
		document.onmouseup = null;
		Drag.obj.onDragEnd(Drag.obj);
		Drag.obj = null;
	},

	fixE : function(e){
		if (typeof e == 'undefined') e = window.event;
		return e;
	}
};
Ответить с цитированием