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

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

01.09.2017, 13:12. Показов 993. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Уведомление о неверно выбранном значении справочника
Maks 06.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt
8Observer8 05.04.2026
Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .
AkelPad-скрипты, структуры, и немного лирики..
testuser2 05.04.2026
Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II
kumehtar 04.04.2026
Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизитов табличной части документа
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .
wmic не является внутренней или внешней командой
Maks 02.04.2026
Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru