Мануал Создаем Drag And Drop инвентарь за 5 минут.

Prostak · 1 Июл 2021

Всем доброго времени суток! Решил поделиться с вами своим опытом и предложить вам, сделать свой D&D инвентарь. Мануал предназначен для тех, кто хоть чуть-чуть освоил знания в HTML/CSS/JS.
(Перед началом создайте 3 файла. index.html, style.css, script.js)

1. Начнем
Для начала нам нужно будет установить несколько дополнительных библиотек. JQuery и JQuery UI.
JQuery мы можем установить несколькими способами. Установив файл в нашу верстку (HTML) или же через CDN Google.

Чтобы установить JQuery через CDN вы можете воспользоваться данной строчкой (вставьте ее в Head вашего HTML проекта):

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Для установки файла вы можете воспользоваться прямой ссылкой на закачку данного файла через Google Disk:

https://drive.google.com/file/d/1zZgGEdLAR92YjlTsOXOChsO6MqXOeiwO/view?usp=sharing

Далее вам потребуется переместить этот файл в корень с вашим HTML проектом и прописать путь до него в head вашего проекта.

Для установки JQuery UI воспользуйтесь данной ссылкой:

https://drive.google.com/file/d/1N87Fk00EYWSPJaXTUB4jrSPIWN6GL-l5/view?usp=sharing

Далее вам потребуется переместить эти файлы в корень с вашим HTML проектом и прописать путь до него в head вашего проекта.

2. Создание слотов
Следующим шагом нам нужно будет заполнить наш HTML файл слотами.
Используем данный код и вставляем его в наше тело (body):

HTML:

<div id="inventory">
        <div class="list-slots">
            <div class="slots">        <!--Используем данный элемент для установки отступов-->
                
            </div>
        </div>
    </div>

Следующим шагом будет парсинг слотов через JS. Открываем script.js, и первым делом прописываем цикл.

JavaScript:
JavaScript:

for (let i = 0; i < 36; i++) { $('.slots').append(` <div class="slot"></div> `) }

Он отвечает за количество слотов в нашем инвентаре. Для смены кол-ва слотов меняем значение 36 - на нужное вам

3. Установим стили
Для установки стилей, открываем файл style.css и вставляем данный код в наш файл:

CSS:

* {
    padding: 0vw;
    margin: 0vw;
    cursor: default;
    /*ЗАПРЕЩАЕМ ВЫДЕЛЯТЬ ТЕКСТ*/
     -ms-user-select: none;

            /**
             * Для мозилы
             */
            -moz-user-select: none;

            /**
             * Для конкверора
             */
            -khtml-user-select: none;

            /**
             * Для Сафари и Хрома
             */
            -webkit-user-select: none;
}

body {
    display: flex;
    justify-content: space-between;
    background: url(http://img.playground.ru/images/5/1/GTA5_2015-05-07_00-53-36-07.png); /*УСТАНОВИМ КАРТИНКУ ДЛЯ НАШЕГО ПРОЕКТА*/
}

#inventory {
    width: 100vw;
    height: 56.25vw;
    background: rgba(0,0,0,.5); /*УСТАНОВИМ ЗАТЕМНЕНИЕ ДЛЯ НАШЕГО ПРОЕКТА*/
}

.list-slots {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*ЗАДАЕМ НАШИМ СЛОТАМ ПОЗИЦИЮ ПО СЕРЕДИНЕ ЭКРАНА*/

    background: rgba(0,0,0,.7);
    width: 41.667vw;
    height: 41.667vw;
    max-width: 80%;
}

.slots {
    max-width: 87%;
    margin: auto;
    padding-top: 3.125vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.slot {
    width: 5.208vw;
    height: 5.208vw;
    background: rgba(255,255,255,.5);
    margin-bottom: 0.781vw;
}

Мы запретили выделение текста и остальных элементов, задали размеры нашим элементам в 'VW', что позволяет нам использовать размеры элементов исходя из ширины экрана (резиновая верстка).
Поставили для нашего проекта фон и сделали затемнение данного фона темно-серым. (Для удаления фона удалите строчку под номером 27 CSS файла).

4. Предметы для инвентаря
Добавим парочку предметов в наши слоты, для проверки нашего D&D в будущем. Первым делом нам нужны иконки которые мы будем использовать. Желательно чтобы иконки были по размеру с нашим слотом инвентаря. К примеру, наш слот на данный момент размером 100x100 пикселей. Используем иконку/картинку предмета такого же размера, но располагаем предмет по середине (берем картинку 50x50 и обвертываем его в невидимый блок 100x100 подробнее в спойлере нижу). После получения изображений, мы создаем папку в корне нашего проекта и называем как вам удобнее, я по стандарту назову "img", в ней создам подкатегорию (еще одну папку) items и загружу все предметы туда.

Берем любое изображение предмета и выгружаем его в Figma со стандартным разрешением:

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

Мы создали предмет 100 на 12 пикселей. Но он будет слишком мал для нашего слота. Для этого мы создаем квадрат 100x100 пикселей и делаем его прозрачным. Располагаем предмет по середине, потом связываем картинку с квадратом и получается что-то вроде этого:

Экспортируем изображение в ранее созданную нами папку. Для удобства используйте название изображения как ID предмета. (0 - x).png.

Теперь мы можем расположить наши элементы в нашем инвентаре.
Создадим массив объектов, в котором пропишем следующее:

JavaScript:

let items =
{
    playerItems:
    [
        {
            img: './img/items/1.png',
            name: 'bat',
            id: 1
        },
        {
            img: './img/items/2.png',
            name: 'axe',
            id: 2
        },
        {
            img: './img/items/2.png',
            name: 'axe',
            id: 2
        },
    ],
}

Таким образом мы задали значения инвентаря игрока. Здесь говориться о том что игрок содержит в инвентаре 3 предмета. 1 биту и два топора. Далее это нужно будет превратить в JSON для получения значений с сервера, но об этом не в этой статье.
Теперь когда у нас есть список предметов мы можем закинуть их в наши слоты, что мы сейчас и сделаем. Запустим еще один цикл который по порядку в слот положит наши предметы.

JavaScript:

for (let i = 0; i < items.weaponsItem.length; i++) {
        $('.slot:nth-child('+ (i + 1) +')').append(`
            <div class="item" id="`+ items.playerItems[i].id +`" style="background: url(`+ items.playerItems[i].img +`); width: 100px; height: 100px; background-repeat: no-repeat; padding-top: 60px;"><div class="size">1</div>
        `)
    }

Здесь мы сказали о том что у нас должны появиться предметы в инвентаре по порядку. Сейчас мы уже можем их увидеть.

5. Подключаем JQuery UI и D&D
В нашем JS файле первым делом мы прописываем вот это:

JavaScript:

let i = 1;
var item_isStackable = "";

Мы объявляем переменную i, которая в будущем поможет нам считать кол-во одинаковых предметов в одном слоте. И к этому-же объявляем переменную которая поможет искать нам предметы.
После этого мы создаем Draggable функцию, которая поможет нам перетаскивать предметы.

JavaScript:

$( ".slot .item").draggable({ // ВЫБИРАЕМ ЭЛЕМЕНТЫ КОТОРЫЕ БУДЕМ ПЕРЕМЕЩАТЬ
        scroll: false, // ЗАПРЕЩАЕМ ПОЯВЛЕНИЮ SCROLL ВО ВРЕМЯ ПЕРЕМЕЩЕНИЯ
        helper: "clone", // ПРИ ПЕРЕМЕЩЕНИИ СОЗДАЕТ КЛОНА
        cursor: "pointer", // КУРСОР В СТИЛЕ POINTER
        zIndex: 27, // ОТОБРАЖЕНИЕ ПЕРЕТАСКИВАЕМОГО ЭЛЕМЕНТА СВЕРХУ
        drag: function(event, ui)
        {
            item_isStackable = $(this).hasClass("stackable");
        },
    });

Теперь создадим функцию для принятия данных элементов:

JavaScript:

$( ".slot" ).droppable({ // Элемент который будет принимать для себя предметы
        accept: ".item", // Принимаемые элементы
        drop: function( event, ui ) {  // Функция выполнится при дропе предмета
            var item = $(this).find(".item");
            if(item.length == 0) /// Просмотр, есть ли уже какие-либо предметы в выбранном в данный момент слоте инвентаря  //
            {
                ui.draggable.detach().appendTo($(this)); // если нет, вставьте предмет в свободный слот ///
            }
            else if (ui.draggable.attr('id') == $(this).children().attr('id')) { // если id предметов совпадают
                    i++;
                    console.log('gf')
                    ui.draggable.detach();  /// Если предметы совпадают, уничтожьте клона и добавьте + 1 к количеству //
                    $(this).children().children().html(i)
                    return i;
            }
            else if(item_isStackable == true && item.children("item")){
                    ui.draggable.detach(); /// Если да, просто уничтожьте клона //
                    ui.draggable.animate(ui.draggable.data().origPosition,"slow"); 
            }else{
                console.log(ui.draggable.attr('id'))
                // в случае , если это не одинаковые предметы, верните элемент в предыдущее положение //
                ui.draggable.animate(ui.draggable.data().origPosition,"slow"); 
                let idSlot = $(this).attr('id')
            }
        }
    });

На этом все, пробуйте, пишите о ошибках и скажите что нужно добавить и что я мог упустить. Не судите строго, в первый раз пишу мануал. Надеюсь на вашу отдачу и дальнейшую поддержку в написании мануалов. Если кому-то нужна будет помощь, буду рад всем в ЛС дискорд: Простак#7939

Лорд · 16 Июл 2021

Зачем указывать тип курсору, если rage не поддерживает данную функцию?

Prostak · 16 Июл 2021

Лорд написал(а):
Зачем указывать тип курсору, если rage не поддерживает данную функцию?

А где здесь что-то говорится про Rage?

Amazingevich · 17 Июл 2021

Prostak написал(а):
А где здесь что-то говорится про Rage?

Нигде, кроме того, что ты это постишь на тематическом форуме и в разделе, которое имеет название "Программирование в RAGE:MP".

Lennishkin · 15 Авг 2021

Подходит на Мод от RedAge 1.1?

Harland David Sanders · 15 Авг 2021

Lennishkin написал(а):
Подходит на Мод от RedAge 1.1?

Любой.

skyElmax · 15 Авг 2021

Harland David Sanders написал(а):
Любой.

Выше же написали что не подходит вообще к рейджу. Нужно самописный D&D делать

Prostak · 15 Авг 2021

skyElmax написал(а):
Выше же написали что не подходит вообще к рейджу. Нужно самописный D&D делать

Что?) Написали про стиль CSS , который не будет работать на Rage.

cursor: pointer

D&D подойдёт для любого мода.

skyElmax · 15 Авг 2021

Prostak написал(а):
Что?) Написали про стиль CSS , который не будет работать на Rage.

D&D подойдёт для любого мода.

Сорян, прочитал что D&D не работает... голова болит...

UchihaMadara · 16 Авг 2021

RAGE не поддерживает HTML 5 Drag&Drop.
Draggable и Droppable не будет работать в игре

Prostak · 16 Авг 2021

UchihaMadara написал(а):
RAGE не поддерживает HTML 5 Drag&Drop.
Draggable и Droppable не будет работать в игре

Используется JQuery UI D&D, там же написано. При установке все работало нормально. Делал его для одного проекта.

skyElmax · 16 Авг 2021

Prostak написал(а):
Используется JQuery UI D&D, там же написано. При установке все работало нормально. Делал его для одного проекта.

@UchihaMadara сообщает о том что именно если использовать HTML D&D то в CEF RAGE:MP он не будет работать. Любой другой на JS будет

Prostak · 16 Авг 2021

skyElmax написал(а):
@UchihaMadara сообщает о том что именно если использовать HTML D&D то в CEF RAGE:MP он не будет работать. Любой другой на JS будет

Я понимаю. Но в данный момент он не сообщил, а указал на ошибку.

RAGE не поддерживает HTML 5 Drag&Drop. точка
новый абзац Draggable и Droppable не будет работать в игре

Имея ввиду то, что данный используемый Draggable и Droppable не будет работать в игре, но как я и сказал ранее, проблем с использованием JQuery UI D&D не возникло , а именно

Код:

$(element).draggable / $(element).droppable

UchihaMadara · 16 Авг 2021

Prostak написал(а):
проблем с использованием JQuery UI D&D не возникло

Только что посмотрел исходники, HTML5 d&d там не используется. Всё верно

Поиск

Мануал Создаем Drag And Drop инвентарь за 5 минут.

Prostak

scammer

Лорд

Начинающий специалист

Prostak

scammer

Amazingevich

Мастер

Lennishkin

Начинающий специалист

Harland David Sanders

Куратор портала

skyElmax

Специалист

Prostak

scammer

skyElmax

Специалист

UchihaMadara

Гуру

Prostak

scammer

skyElmax

Специалист

Prostak

scammer

UchihaMadara

Гуру