Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
 
 
Рейтинг 4.89/18: Рейтинг темы: голосов - 18, средняя оценка - 4.89
 Аватар для Narimanych
2752 / 1726 / 779
Регистрация: 23.03.2015
Сообщений: 5,452

Запрет "перетаскивания" элемента

08.10.2021, 13:24. Показов 3629. Ответов 22
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Привет

Задача-запретить "сброс" мелких квадратов друг на друга в div'e game
Message в дебаге: Uncaught TypeError: el.draggable is not a function...
А как прописать эту функцию- не понимаю...
Буду признателен за помощь.
Код прилагаю:
HTML5
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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
 
        body {
            margin: 0
        }
 
        #game {
            position: relative;
            width: 600px;
            height: 400px;
            box-shadow: 0 0 10px rgb(65, 2, 31);
            margin: 100px 0 0 100px;
 
        }
    </style>
</head>
 
<body>
    <div id="game"></div>
 
    
</body>
 
</html>
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(() => {
            let game = $("#game");
            let width = $(window).width();
 
            start();
            function start() {
                let m = 1;
                let n = 1;
                game.css({
                    'background': 'none'
                });
                for (let i = 0; i < 3; i++) {
                    for (let j = 0; j < 4; j++) {
                        game.append('<div id="part' + i + j + '"></div>');
                        $('#part' + i + j)
                            .css({
                                position: 'absolute',
                                width: '100px',
                                height: '100px',
                                'box-shadow': '1px 1px 7px black',
                                transform: 'rotate(' + rand(-15, 15) + 'deg)',
                                left: rand(610, width - 200) + 'px',
                                top: rand(10, 390) + 'px',
                                backgroundColor: getRandomColor()
                            })
                    }
                }
 
                $("#game > div").draggable({
                    //  revert: 'invalid',
                    snap: true,
                    start: function () {
                        $(this).css({
                            'z-index': '99'
                        })
                        el = $(this).attr("id")
                    },
                    stop: function () {
                        let t = Math.round(parseInt($(this).css('top')) / 100) * 100;
                        let l = Math.round(parseInt($(this).css('left')) / 100) * 100;
                        if (l >= 0 && l <= 700 && t >= 0 && t <= 500) {
                            $("#game > div").each(function () {
                                if ($(this).attr("id") != el && $(this).position().left == l && $(this).position().top == t) {
                                    el.draggable('option', 'revert', true);     //how to fixed?
                                }
 
                            })
 
                            $(this).css({
                                transform: 'rotate(0)',
                                left: l + 'px',
                                top: t + 'px',
                                'box-shadow': 'none',
                                'z-index': '50',
                                border: '1px solid #000'
 
                            })
                        }
                    }
                });
            }
        })
        let fixedValue = (t) => t.toString().padStart(2, "0");
        function getRandomColor() {
            let letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
 
        function rand(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
 
 
    </script>
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
08.10.2021, 13:24
Ответы с готовыми решениями:

Перетаскивания элемента списка js
Хочу сделать перетаскивания элементов списка(что бы можно было менять местами), нашел код, по нему делаю, добавляю элемент у список, он...

Запрет перетаскивания формы
Поможите решить проблемку: Как запретить пользователю таскать форму (окно) с помощью мышки. Думал что это есть в свойствах формы но там...

Запрет возможности перетаскивания окна
как сделать так, чтобы окно нельзя перетаскивать было Добавлено через 9 минут разобрался BorderStyle = bsNone

22
 Аватар для Narimanych
2752 / 1726 / 779
Регистрация: 23.03.2015
Сообщений: 5,452
15.10.2021, 11:37  [ТС]
Студворк — интернет-сервис помощи студентам
Цитата Сообщение от Balanaar Посмотреть сообщение
А что именно глючит?
Скидываются друг на друга....
Для проверки и флаг сделал-строка 114-115 .
Все равно не пойму. что и где не так...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
15.10.2021, 12:29
Лучший ответ Сообщение было отмечено Narimanych как решение

Решение

Всё дело в том, что цикл, объявленный на 76й строке, проходится по всем вашим квадратикам. Представим, что мы положили в игровую область один квадрат. Дальше взяли второй и навели его над первым. То длиннющее условие, которое вы написали, будет истинным для этой пары элементов. И droppable действительно отключится. Однако цикл на этом не остановится. Он пойдёт к следующему квадрату, который не лежит под перетаскиваемым. Условие будет ложным и droppable сразу включится.
1
 Аватар для Narimanych
2752 / 1726 / 779
Регистрация: 23.03.2015
Сообщений: 5,452
16.10.2021, 11:31  [ТС]
Balanaar,

СПАСИБО!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
16.10.2021, 11:31

Запрет перетаскивания формы внутри родительской
Доброго времени суток! Делаю приложение, не знаю как запретить перетаскивание формы. Вот фото проекта: Ребят, как запретить...

Возможность перетаскивания элемента управления пользователем
Всем привет. Есть PictureBox который нужно заставить перетаскиваться пользователем при помощи мышки. Как это реализовать? Заранее спасибо.

как организовать запрет создания элемента справочника с наименованием , существующим в справочнике - запрет задваивания
Здравствуйте, скажите пожалуйста, как организовать запрет создания элемента справочника с наименованием элемента, который существует в...

Создание элемента для копирования пути файла путем его перетаскивания на форму
Доброго времени суток. Задание курсовой: реализовать два алгоритма шифрования данных и с помощью формы создать интерфейс, удобный...

Запрет смещения элемента. Html
Делаю меню в группе вконтакте, и с толкнулся вот с такой проблемой (смотрите фотографии) предоставляю исходник, помогите исправить эту...


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

Или воспользуйтесь поиском по форуму:
23
Ответ Создать тему
Новые блоги и статьи
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
Запрет дублирования строк в табличной части
Maks 13.09.2026
Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр.
Jin X 06.09.2026
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .
Программа опроса у.з. расходомера SLS-720F
Argus19 02.09.2026
Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0.
Maks 31.08.2026
При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм
anaschu 30.08.2026
Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы.
russiannick 30.08.2026
Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru