Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
 Аватар для Tsyklop
5 / 6 / 5
Регистрация: 01.01.2014
Сообщений: 399

Drag&Drop и Click на одном блоке

01.09.2017, 13:12. Показов 955. Ответов 5
Метки нет (Все метки)

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

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
$(document).ready(function() {
        let block = $('div.block');
    
        let dragObject = {};
    
                    block.mousedown(function (e) {
                        console.log('mousedown');
                        console.log('e.pageX '+e.pageX + ' ' + 'e.pageY '+e.pageY);
                        if (e.which != 1) {
                            return;
                        }
                        let target=$(e.target);
                        if (target.is(block) || target.closest(block).length > 0) {
                            let pOffset = $(e.target).closest(block).offset();
                            console.log('pOffset ');
                            console.log(pOffset);
                            let x = Math.round(e.pageX - pOffset.left);
                            let y = Math.round(e.pageY - pOffset.top);
                            dragObject.x = x;
                            dragObject.y = y;
                            dragObject.e = target.closest(block);
                            localStorage.setItem('relOX', x);
                            localStorage.setItem('relOY', y);
                        }
                    });
    
                    block.mouseup(function (e) {
                        console.log('mouseup');
                        if(!dragObject.m) {
                            block.css('background', 'red');
                        } else {
                           let pos = JSON.parse(localStorage.getItem('pos'));
                                                 block.css({'top': pos.y, 'left': pos.x});
                        }
                        dragObject = {};
                        $('body').removeClass('disable-select');
    
                    });
    
                    $(document).mousemove(function (e) {
                        if(!dragObject.e) {
                            delete dragObject.m;
                            return;
                        } else {
                            console.log('mousemove');
                            let relX = Number(localStorage.getItem('relOX'));
                            let relY = Number(localStorage.getItem('relOY'));
                            let x = e.pageX - relX;
                            let y = e.pageY - relY;
                            if (Math.abs(x) < 6 && Math.abs(y) < 6) {
                                delete dragObject.m;
                                return;
                            }
                            console.log('X - '+x+' '+'Y - '+y);
                            localStorage.setItem('pos', JSON.stringify({y: y, x: x}));
                            block.css({'top': y, 'left': x});
                            dragObject.m = block;
                        }
                    });
    
    });
Есть такое: https://jsfiddle.net/dp39hc4x/5/

Перемещение работает, но простое нажатие нет (при простом нажатии должен измениться цвет).

Подскажите что не так делаю?
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
01.09.2017, 13:12
Ответы с готовыми решениями:

Drag&Drop
Есть таблица (много полей) Существует ли фреймворк для Drag&amp;Drop который по верх этой таблице двигал div блок и по необходимости менял...

Drag&Drop
Я хочу сделать интерфейс Drag and Drop. И вроде всё делаю правильно, но почему-то скрипт работает не совсем адекватно. Вот, собственно, сам...

Drag&Drop and resize
Помогите понять в чем проблема, я только начал, еще зеленый. Проблема вот в чем, элемент перемещается нормально, но вот неадекватно...

5
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
01.09.2017, 13:27
Цитата Сообщение от Tsyklop Посмотреть сообщение
простое нажатие нет (при простом нажатии должен измениться цвет)
В вашем фидле цвет блока корректно меняется на красный. Где проблема?
0
 Аватар для Tsyklop
5 / 6 / 5
Регистрация: 01.01.2014
Сообщений: 399
01.09.2017, 14:11  [ТС]
Цитата Сообщение от Balanaar Посмотреть сообщение
В вашем фидле цвет блока корректно меняется на красный. Где проблема?
а двигать блок вы можете?

Я перемещать могу. а простое нажатие цвет не меняет.
0
Эксперт JSЭксперт HTML/CSS
 Аватар для mrtoxas
3827 / 2677 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
01.09.2017, 14:21
И двигать, и менять цвет при клике.
Chrome 60 x64, Edge 40, IE11.
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
01.09.2017, 14:49
Tsyklop, какой браузер используете?
0
 Аватар для Tsyklop
5 / 6 / 5
Регистрация: 01.01.2014
Сообщений: 399
01.09.2017, 15:24  [ТС]
Вот. гляньте сейчас https://jsfiddle.net/dp39hc4x/25/
Balanaar, Хром 60.

Добавлено через 2 минуты
что сейчас с перемещением... не пойму.

Добавлено через 31 минуту
Решено: https://jsfiddle.net/dp39hc4x/28/
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
01.09.2017, 15:24
Помогаю со студенческими работами здесь

Drag&Drop в JavaScript
Народ привет!!!!! Подскажите пожалуйста, как в JavaScript сделать перетаскивание какого-нибудь элемента или рисунка,и чтобы при...

Drag&drop и список
https://codepen.io/Swaer/pen/xJGdPZ не знаю как перетаскивать в другой блок элементы списка, если один элемент, я его легко могу перемещать...

Работающий код использования drag&drop+javascript
Люди, дайте работающий код subjа пожалуйста, или линк... Заранее благодарен!

Drag & Drop files. Как теперь получить файл?
Здравствуйте. Раньше были методы getAsText() getAsDataURL() getAsBinary() Теперь этих методов нет. Как получить файл, который...

Drag and drop
Помогите найти ошибку &lt;html&gt; &lt;head&gt; &lt;script&gt; var ball = document.getElementById('ball'); ball.onmousedown = function(e) { ...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru