Сортировка изображений с помощью перетаскивания мышью js
Сортировка изображений с помощью перетаскивания мышью js

Поделитесь эффектом сортировки изображений на основе js. Перетащите изображение мышкой, чтобы изменить порядок изображений. Этот плагин подходит для браузеров: IE8, 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou и Window of the World. Визуализации следующие:

Предварительный просмотр онлайн Загрузка исходного кода

Реализованный код.

HTML-код:

Язык кода:javascript
копировать
  <ul id="ul1">
        <li>
            <img src="images/1.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/2.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/3.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/4.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/5.jpg" width="200" height="150" /></li>
        <li>
            <img src="images/6.jpg" width="200" height="150" /></li>
    </ul>

CSS-код:

Язык кода:javascript
копировать
  *
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #ul1
        {
            width: 660px;
            position: relative;
            margin: 10px auto;
        }
        #ul1 li
        {
            width: 200px;
            height: 150px;
            float: left;
            list-style: none;
            margin: 10px;
        }
        #ul1 li:hover
        {
            border-color: #9a9fa4;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);
        }
        #ul1 .active
        {
            border: 1px dashed red;
        }

js-код:

Язык кода:javascript
копировать
  window.onload = function () {
            var oUl = document.getElementById("ul1");
            var aLi = oUl.getElementsByTagName("li");
            var disX = 0;
            var disY = 0;
            var minZindex = 1;
            var aPos = [];
            for (var i = 0; i < aLi.length; i++) {
                var t = aLi[i].offsetTop;
                var l = aLi[i].offsetLeft;
                aLi[i].style.top = t + "px";
                aLi[i].style.left = l + "px";
                aPos[i] = { left: l, top: t };
                aLi[i].index = i;
            }
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].style.position = "absolute";
                aLi[i].style.margin = 0;
                setDrag(aLi[i]);
            }
            //Перетаскивание
            function setDrag(obj) {
                obj.onmouseover = function () {
                    obj.style.cursor = "move";
                }
                obj.onmousedown = function (event) {
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
                    obj.style.zIndex = minZindex++;
                    //Рассчитываем расстояние между мышью и перетаскиваемым объектом при нажатии мыши
                    disX = event.clientX + scrollLeft - obj.offsetLeft;
                    disY = event.clientY + scrollTop - obj.offsetTop;
                    document.onmousemove = function (event) {
                        //Рассчитываем положение элемента div при перетаскивании мыши
                        var l = event.clientX - disX + scrollLeft;
                        var t = event.clientY - disY + scrollTop;
                        obj.style.left = l + "px";
                        obj.style.top = t + "px";
                        /*for(var i=0;i<aLi.length;i++){
                        aLi[i].className = "";
                        if(obj==aLi[i])continue;//Если это вы, пропустите себя, не добавляя красную пунктирную линию
                        if(colTest(obj,aLi[i])){
                        aLi[i].className = "active";
                        }
                        }*/
                        for (var i = 0; i < aLi.length; i++) {
                            aLi[i].className = "";
                        }
                        var oNear = findMin(obj);
                        if (oNear) {
                            oNear.className = "active";
                        }
                    }
                    document.onmouseup = function () {
                        document.onmousemove = null; //Удаляем событие перемещения, когда появляется мышь
                        document.onmouseup = null; //Удалим событие up и очистим память
                        //Проверяем, есть ли общая встреча, в позиции обмена
                        var oNear = findMin(obj);
                        if (oNear) {
                            oNear.className = "";
                            oNear.style.zIndex = minZindex++;
                            obj.style.zIndex = minZindex++;
                            startMove(oNear, aPos[obj.index]);
                            startMove(obj, aPos[oNear.index]);
                            //Индекс биржи
                            oNear.index += obj.index;
                            obj.index = oNear.index - obj.index;
                            oNear.index = oNear.index - obj.index;
                        } else {

                            startMove(obj, aPos[obj.index]);
                        }
                    }
                    clearInterval(obj.timer);
                    return false; //Запрещенные символы появляются в более ранних версиях
                }
            }
            //обнаружение столкновений
            function colTest(obj1, obj2) {
                var t1 = obj1.offsetTop;
                var r1 = obj1.offsetWidth + obj1.offsetLeft;
                var b1 = obj1.offsetHeight + obj1.offsetTop;
                var l1 = obj1.offsetLeft;

                var t2 = obj2.offsetTop;
                var r2 = obj2.offsetWidth + obj2.offsetLeft;
                var b2 = obj2.offsetHeight + obj2.offsetTop;
                var l2 = obj2.offsetLeft;

                if (t1 > b2 || r1 < l2 || b1 < t2 || l1 > r2) {
                    return false;
                } else {
                    return true;
                }
            }
            //Теорема Пифагора находит расстояние
            function getDis(obj1, obj2) {
                var a = obj1.offsetLeft - obj2.offsetLeft;
                var b = obj1.offsetTop - obj2.offsetTop;
                return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
            }
            //Находим ближайший
            function findMin(obj) {
                var minDis = 999999999;
                var minIndex = -1;
                for (var i = 0; i < aLi.length; i++) {
                    if (obj == aLi[i]) continue;
                    if (colTest(obj, aLi[i])) {
                        var dis = getDis(obj, aLi[i]);
                        if (dis < minDis) {
                            minDis = dis;
                            minIndex = i;
                        }
                    }
                }
                if (minIndex == -1) {
                    return null;
                } else {
                    return aLi[minIndex];
                }
            }
        }

via:http://www.w2bc.com/Article/23686

Запрещено воспроизведение без разрешения:блог толстого кота » Сортировка изображений с помощью перетаскивания мышью js

boy illustration
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
boy illustration
Код js веб-страницы, фон частицы, код спецэффектов
boy illustration
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
boy illustration
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
boy illustration
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
boy illustration
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
boy illustration
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
boy illustration
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
boy illustration
Серия uni-app: uni.navigateЧтобы передать скачок значения
boy illustration
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
boy illustration
JS-время конвертации
boy illustration
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
boy illustration
Поле комментария, щелчок мышью, специальные эффекты, js-код
boy illustration
Объект массива перемещения объекта JS
boy illustration
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
boy illustration
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
boy illustration
Получить текущее время в js_Как динамически отображать дату и время в js
boy illustration
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
boy illustration
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
boy illustration
Copilot облачной разработки — упрощение разработки
boy illustration
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
boy illustration
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
boy illustration
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
boy illustration
vLLM: мощный инструмент для ускорения вывода ИИ
boy illustration
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
boy illustration
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
boy illustration
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
boy illustration
LM Studio для создания локальных больших моделей
boy illustration
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
boy illustration
[Отслеживание целей] Подробное объяснение ByteTrack и детали кода