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

Prostak

scammer

Автор темы

Мошенник

1 Июл 2021

#1

Всем доброго времени суток! Решил поделиться с вами своим опытом и предложить вам, сделать свой 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:
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

Реакции: Do$, ruslanBLR, Etader и 17 других

Лорд

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

16 Июл 2021

#2

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

Prostak

scammer

Автор темы

Мошенник

16 Июл 2021

#3

Лорд написал(а):

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

Нажмите для раскрытия...

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

Amazingevich

Гуру

17 Июл 2021

#4

Prostak написал(а):

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

Нажмите для раскрытия...

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

Реакции: Prostak, arbuzyan, Crystal Studio и ещё 1 человек

Lennishkin

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

15 Авг 2021

#5

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

Harland David Sanders

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

Команда форума

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

VIP

high coder

media

15 Авг 2021

#6

Lennishkin написал(а):

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

Нажмите для раскрытия...

Любой.

skyElmax

Специалист

high coder

15 Авг 2021

#7

Harland David Sanders написал(а):

Любой.

Нажмите для раскрытия...

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

Prostak

scammer

Автор темы

Мошенник

15 Авг 2021

#8

skyElmax написал(а):

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

Нажмите для раскрытия...

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

cursor: pointer

Нажмите для раскрытия...

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

Реакции: skyElmax

skyElmax

Специалист

high coder

15 Авг 2021

#9

Prostak написал(а):

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

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

Нажмите для раскрытия...

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

Реакции: Prostak

UchihaMadara

Гуру

high coder

16 Авг 2021

#10

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

Реакции: skyElmax

Prostak

scammer

Автор темы

Мошенник

16 Авг 2021

#11

UchihaMadara написал(а):

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

Нажмите для раскрытия...

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

Реакции: skyElmax

skyElmax

Специалист

high coder

16 Авг 2021

#12

Prostak написал(а):

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

Нажмите для раскрытия...

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

Prostak

scammer

Автор темы

Мошенник

16 Авг 2021

#13

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

Гуру

high coder

16 Авг 2021

#14

Prostak написал(а):

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

Нажмите для раскрытия...

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

Реакции: Prostak

scammer

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

scammer

Гуру

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

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

Специалист

scammer

Специалист

Гуру

scammer

Специалист

scammer

Гуру

Privacy & Transparency

Privacy & Transparency