Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 Аватар для Punker1
0 / 0 / 0
Регистрация: 19.11.2024
Сообщений: 8

Клонирование и перенос блоков div в целевую область

19.11.2024, 17:46. Показов 789. Ответов 1

Студворк — интернет-сервис помощи студентам
Я пытаюсь сделать для меня совсем не тривиальную задачу, некий интерактивный конструктор по заполнению целевой области блоками нужных мне размеров. Клонирование и перенос блоков (красных или синих) в целевую зону (зелёный блок) я смог реализовать благодаря просторам интернета. Скрипт ниже:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready(function () {
    var x = null;
    //Make element draggable
    $(".drag").draggable({
        helper: "clone",
        cursor: "move",
        tolerance: "fit"
    });
    $("#target").droppable({
        drop: function (e, ui) {
            if ($(ui.draggable)[0].id != "") {
                x = ui.helper.clone();
                ui.helper.remove();
                x.draggable({
                    helper: "original",
                    containment: "#target",
                    tolerance: "fit"
                });
                x.appendTo("#target");
            }
        }
    });
    var gn11 = parseInt(document.getElementsByClassName("div1-1").length);
    document.getElementById("gn1-1").innerHTML = gn11 - 1;
    var gn24 = parseInt(document.getElementsByClassName("div2-4").length);
    document.getElementById("gn2-4").innerHTML = gn24 - 1;
    var gn23 = parseInt(document.getElementsByClassName("div2-3").length);
    document.getElementById("gn2-3").innerHTML = gn23 - 1;
    var gn13 = parseInt(document.getElementsByClassName("div1-3").length);
    document.getElementById("gn1-3").innerHTML = gn13 - 1;
    var gn12 = parseInt(document.getElementsByClassName("div1-2").length);
    document.getElementById("gn1-2").innerHTML = gn12 - 1;
    var gn14 = parseInt(document.getElementsByClassName("div1-4").length);
    document.getElementById("gn1-4").innerHTML = gn14 - 1;
    var gn16 = parseInt(document.getElementsByClassName("div1-6").length);
    document.getElementById("gn1-6").innerHTML = gn16 - 1;
});
 
//Удаление блоков
function del() {
    var popup = document.getElementById("drag");
    popup.remove();
}
Посмотреть полностью можно здесь: https://codepen.io/Mecuchi/pen/WNVamEJ

Но есть несколько недостатков, которые я прошу помочь мне решить:
1. Блоки при переносе в зелёную область не должны за неё выходить, но это работает только если блок перенести на зелёную область, отпустить, снова схватить и тогда за область не выйти.
2. Блоки в зелёной области не должны перекрывать друг друга.
3. При нажатии на крестик в правом верхнем углу, клонированный блок должен удаляться.
4. В таблице снизу должны считаться соответствующие блоки, которые размещены в зелёной области.
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
19.11.2024, 17:46
Ответы с готовыми решениями:

Перенос div блоков css
Здравствуйте)) можно ли перенести div блоки по вертикале? Например, если в пк сайт отображается так: а в смартфонах так: ...

Затрудняюсь сделать правильный перенос блоков div
Проблема заключается в следующем : Мне нужно чтобы при сужении экрана браузера, блоки 1 2 3 4 5 6 7 8 съезжали вниз . Т.е все этажи...

Как сделать перенос блоков внутри div?
Создаю онлайн калькулятор для сайта. В div есть чекбоксы, некоторые из них не влезают в экран. Хотелось бы сделать для них перенос на...

1
 Аватар для Punker1
0 / 0 / 0
Регистрация: 19.11.2024
Сообщений: 8
20.11.2024, 17:45  [ТС]
Четвёртый пункт повесил на отдельную кнопку - всё работает. Вопрос закрыт.

Добавлено через 18 минут
Третий пункт реализовал через удаление последнего клонированного, но это не совсем то, что надо.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
20.11.2024, 17:45
Помогаю со студенческими работами здесь

Клонирование блоков
Всем привет, есть ли такое в js или jq - клонирование блоков Например я на сайте расположил блок в один пиксель ширины и в 100% высоты...

Клонирование блоков
Здравствуйте. Имеется такой код <section class='new-answer answer-1' > <hr> <div class="row"> <div...

Перенос созданной DLL на целевую машину
Сделал DLL на С++ для печати этикетки с данными из указанного файла. Она должна вызываться из тестовой программы (платформа х64). На...

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу текст разместить в левой части шапки с...

Равномерное растяжение блоков div в родительском div по вертикали с отступами
Здравствуйте, прощу помочь с вёрсткой. Есть блок с классом sidebar, которому задаётся расположение относительно страницы. В нём находится...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Access
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru