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

[sashgera]

Здравствуйте

Есть див с 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;
	}
};

[voraa]

На данный момент скролл работает медленнее, чем перетаскивается элемент.

Скролл работает с той скоростью, с которой может.
Просто надо поменять логику скролла.
Скролить окно надо не в том случае, когда мышь двигается, а когда нижняя граница перетаскиваемого элемента достигла нижней границы элемента в котором производится скролл, независимо от того, движется мышь или нет. Главное, что бы кнопка мыши была нажата.
Оставить курсор мыши в пределах окна вы все равно не сможете. Это общесистемный ресурс и браузеру он не подчиняется. Если мышь двигается, то будет двигаться и курсор.

[sashgera]

Скролить окно надо не в том случае, когда мышь двигается, а когда нижняя граница перетаскиваемого элемента достигла нижней границы элемента в котором производится скролл

voraa, начал делать, но возникли проблемы, которые не могу решить. Не поможете?

- если полоса прокрутки равна 0, все хорошо - скролл начинается когда перетаскиваемый элемент достиг нижней границы дива
- если полоса прокрутки больше нуля, проблема - при начале перетаскивания элемента, полоса прокрутки из начального положения уменьшается на растояние, которое равно: от текущего положения перетаскиваемого элемента до нижней границы дива
- если перетаскивать снизу вверх - скролл начинается сразу, а не когда элемент достигает верхней части дива

// переменная dragContainer - див, в котором находятся элементы
// переменная myElem - перетаскиваемый элемент
if (myElem.offsetTop > (dragContainer.offsetHeight + dragContainer.offsetTop)){
  dragContainer.scrollTop = (myElem.offsetHeight + myElem.offsetTop) - (dragContainer.offsetHeight + dragContainer.offsetTop);
}

[voraa]

Нет. Не помогу.
Нужен весь код, что бы разбираться, что там происходит и иметь возможность тестировать.
Но я смутно представляю, что такое "гаджет" в виндовс 7, какой там js, да и 7 у меня нет.

[voraa]

А почему не использовать обычный нативный drag n drp?
Там проблем со скроллингом нет - все делается автоматически.
Хоть и не полностью он поддерживается даже в старых IE

[sashgera]

voraa, я уже пробовал что-то типа этого - https://stackoverflow.com/questions/...nding-on-mouse но ничего не получилось, для работы в старых ie менял метод addEventListener на attachEvent

[Rise]

sashgera,
Подключи jquery просто, и плагин какой-нибудь, например, есть jquery-ui, там есть sortable. Все версии можешь скачать здесь: jquery, jquery-ui. Начинай с jquery 1.12.4 и jquery-ui 1.12.1, если что-то не работает понижай версию. Иногда можно по годам что-то подгонять, например, windows 7 вышла в 2009-м, значит jquery близкого года выпуска точно должна поддерживаться, год выпуска указан в uncompressed версиях, ну это так, windows 7 здесь просто для примера, в целом это всего касается, на будущее тебе совет просто, а поддерживаться на самом деле могут и более позднии версии.

[sashgera]

Rise, первое, что я пытался сделать, это подключить jquery. Но при подключении гаджет перестает работать

[voraa]

Но при подключении гаджет перестает работать

У вас там $ используется для каких то других целей.
Используйте jQuery.noConflict()
https://api.jquery.com/jquery.noconflict/

[sashgera]

Скролл при перетаскивании элементов сделал. Скажите, при скролле, расстояние между перетаскиваемым элементом и курсором увеличивается - это нормальное состояние? так и должно быть? Вот видео https://youtube.com/shorts/VbGXOzoyZ_0
Во вложении файл js с функциями drag, событие скролла отметил комментом