Здравствуйте, вопрос по drag & drops

Хотел бы перемещать список внутри и в пределах контейнера(ниже эти элементы присвоены переменным). По оси X движение хорошо отрабатывает, по оси Y при срабатывании события mousemove, список резко падает на максимально-установленную координату по Y(в коде ниже) и лежит там. Вертикальное перемещение списка все же возможно, но только в случае если курсор находится много выше списка и в таком случае чем больше амплитуда движения курсора, тем сильнее можно подбросить список наверх. ``

<script>
    (function () {
        var list = document.querySelector('ul');
        var container = document.querySelector('.container');
        list.style.position = 'absolute';
        container.style.position = 'relative';

    // ниже записываю в объект границы контейнера, в пределах которых можно переместить список

        var LOCATION = {
            X_MIN: 0,
            X_MAX: container.offsetWidth - list.offsetWidth,
            Y_MIN: 0,
            Y_MAX: container.offsetHeight - list.offsetHeight
        };

    // функция проверки, что бы список находился в пределах контейнера.

        var setControlArea = function () {
            if (list.offsetLeft <= LOCATION.X_MIN) {
                list.style.left = LOCATION.X_MIN + 'px';
            }
            if (list.offsetLeft >= LOCATION.X_MAX) {
                list.style.left = LOCATION.X_MAX + 'px';
            }
            if (list.offsetTop <= LOCATION.Y_MIN) {
                list.style.top = LOCATION.Y_MIN + 'px';
            }
            if (list.offsetTop >= LOCATION.Y_MAX) {
                list.style.top = LOCATION.Y_MAX + 'px';
            }
        };

     // drag & drop

        list.addEventListener('mousedown', function (evt) {
            evt.preventDefault();
            var startCoordinates = {
                X: evt.clientX,
                Y: evt.clientY
            };
            var listMouseMoveHandler = function (moveEvt) {
                moveEvt.preventDefault();
                var shift = {
                    X: startCoordinates.X - moveEvt.clientX,
                    Y: startCoordinates.Y - moveEvt.clientY
                };
                startCoordinates = {
                    X: moveEvt.clientX,
                    Y: moveEvt.clientY
                };

                list.style.left = list.offsetLeft - shift.X + 'px';
                list.style.top = list.offsetTop - shift.Y + 'px';
                setControlArea();
            };
            var listMouseUpHandler = function () {
                document.removeEventListener('mousemove', listMouseMoveHandler);
                document.removeEventListener('mouseup', listMouseUpHandler);
            };
            document.addEventListener('mousemove', listMouseMoveHandler);
            document.addEventListener('mouseup', listMouseUpHandler);
        })
    }());
</script>

``