Аватар для Narimanych
2752 / 1726 / 779
Регистрация: 23.03.2015
Сообщений: 5,452

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

08.10.2021, 13:24. Показов 3652. Ответов 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
Ответ Создать тему
Опции темы

Новые блоги и статьи
FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3)
8Observer8 18.10.2026
Содержание блога | English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .
Локальный http сервер
Argus19 17.10.2026
Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .
Копировать Windows на новый диск на UEFI
damix 17.10.2026
https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .
ИИ не может найти нужный язык в списке
Supersumestria 05.10.2026
Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .
Новая последняя моя музыка в SUNO
zorxor 05.10.2026
Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .
Программный домашний кинотеатр
russiannick 27.09.2026
Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru