powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Drag & click на одном элементе JS - JavaScript
15 сообщений из 15, страница 1 из 1
Drag & click на одном элементе JS - JavaScript
    #39503239
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Есть такой код:


Код: 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.
$this.Move = false;
                    Block.mousedown(function (e) {
                        $this.Move = false;
                        let target  =$(e.target);
                        if (target.is(Block) || target.closest(Block).length > 0) {
                            console.log('start moved');
                            Block.attr('data-move', true);
                            let pOffset = $(e.target).closest(Block).offset();
                            localStorage.setItem('relOX', Math.round(e.pageX - pOffset.left));
                            localStorage.setItem('relOY', Math.round(e.pageY - pOffset.top));
                        }
                    });
    
                    openChat.mouseup(function (e) {
                        if($this.Move) {
                            console.log('pin');
                            if(Block.attr('data-move').bool()) {
                                Block.attr('data-move', false);
                                Block.attr('data-moved', false);
    
                                let pWidth = $('body').innerWidth();
                                let pMiddle = pWidth / 2;
                                let pHeight = $('body').innerHeight();
    
                                let pos = JSON.parse(localStorage.getItem('online-icon-pos'));
                                if (pos.x < pMiddle) {
                                    Block.css({'top': pos.y, 'left': (pos.x = 0)});
                                } else if (pos.x > pMiddle) {
                                    Block.css({'top': pos.y, 'left': (pos.x = (pWidth - Number(openChat.outerWidth(true))))});
                                } else {
                                    Block.css({'top': pos.y, 'left': (pos.x = 0)});
                                }
                                localStorage.setItem('online-icon-pos', JSON.stringify({y: pos.y, x: pos.x}));
                            }
                        } else {
                            console.log('open');
                            Block.attr('data-move', false);
                            Block.attr('data-moved', false);
                           
                            $(this).fadeOut(200, function () {
                                block.fadeIn(200, function () {
                                    $(this).animate({
                                        right: 0
                                    }, 200);
                                });
                            });
                        }
                        $this.Move = false;
                    });
    
                    $(document).mousemove(function (e) {
                        //if(!$this.Move) return;
                        if(Block.attr('data-move').bool()) {
                            $this.Move = true;
                            let relX = Number(localStorage.getItem('relOX'));
                            let relY = Number(localStorage.getItem('relOY'));
    
                            let y = e.pageY - relY;
                            let x = e.pageX - relX;
    
                            localStorage.setItem('online-icon-pos', JSON.stringify({y: y, x: x}));
    
                            Block.css({'top': y, 'left': x});
    
                            Block.attr('data-moved', true);
                        }
                    });




`Block` - элемент по которому кликают или перемешают.

`block` - элемент который должен открыться при клике на `Block`

Проблема в том что простой клик не отрабатывает. Перемещение работает, а если просто нажать то нет. Консоль выведет: `start move` и при отпускании `pin`.

Что не так в коде?
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503241
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
А где бинд на клик?
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503244
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
hVosttА где бинд на клик?

там же openChat.mouseup. Только вместо openChat Block.
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503280
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Tsyklop,

не вижу бинд на клик или на двойной клик, у вас бинд на возврат клавиши мыши (отпустили кнопку)
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503286
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
hVostt,

click это тот же mouseup. в бинде mouseup условие if. одно условие прижимает элемент к краю, когда мы двигали и отпустили мышку, а другое условие открывает блок.
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503290
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsyklophVostt,

click это тот же mouseup. в бинде mouseup условие if. одно условие прижимает элемент к краю, когда мы двигали и отпустили мышку, а другое условие открывает блок.

по-моему вы не поняли. сделайте бинд на клик или на двойной клик и будет вам счастье.

вот вам пример: http://jsfiddle.net/zRr4s/3/

проделайте следующее:

наведите курсор на кнопку и нажмите левую кнопку мыши,
удерживая нажатой кнопку уберите курсор с кнопки,
отпустите левую кнопку мыши.

зацените результа
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503293
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
hVostt,

но мне не нужен двойной клик. Бинд на клик, тобишь mouseup уже и так есть.
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503314
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsyklophVostt,

но мне не нужен двойной клик. Бинд на клик, тобишь mouseup уже и так есть.

бинда на клик нету, mouseup ≠ click
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503324
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
hVosttTsyklophVostt,

но мне не нужен двойной клик. Бинд на клик, тобишь mouseup уже и так есть.

бинда на клик нету, mouseup ≠ click

хорошо. click это два события mousedown и mouseup. Клик срабатывает когда мы отпускаем кнопку мыши. А если я её зажму то ничего не произойдёт.
И допустим, я повесил mousedown что бы отследить зажатие. Но после того как я отпущу кнопку сработает click. Тут без флага не обойтись
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503339
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Tsyklopхорошо. click это два события mousedown и mouseup.

это не так.

TsyklopКлик срабатывает когда мы отпускаем кнопку мыши. А если я её зажму то ничего не произойдёт.
И допустим, я повесил mousedown что бы отследить зажатие. Но после того как я отпущу кнопку сработает click. Тут без флага не обойтись

почему бы не использовать mouseup / mousedown для драг-н-дропа, а click для клика? на чём вы там пытаетесь сэкономить? на спичках?

что мешает прибиндить то что вам надо на клик и заняться другими делами? это будет во-первых, правильно. во-вторых, решит вашу задачу. что ещё надо-то?
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503358
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
hVosttTsyklopхорошо. click это два события mousedown и mouseup.

это не так.

TsyklopКлик срабатывает когда мы отпускаем кнопку мыши. А если я её зажму то ничего не произойдёт.
И допустим, я повесил mousedown что бы отследить зажатие. Но после того как я отпущу кнопку сработает click. Тут без флага не обойтись

почему бы не использовать mouseup / mousedown для драг-н-дропа, а click для клика? на чём вы там пытаетесь сэкономить? на спичках?

что мешает прибиндить то что вам надо на клик и заняться другими делами? это будет во-первых, правильно. во-вторых, решит вашу задачу. что ещё надо-то?

да click отработает после того как я отпущу кнопку мыши. Сработает mouseup и потом ещё и click.

Вот пример. комбинации трёх ивентов и кто когда срабатывает. https://jsfiddle.net/
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503359
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503385
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsyklopTsyklop,

https://jsfiddle.net/3s5b43y8/

У тебя задачи разные, да события срабатывают, но по-разному. Движение может отменить действие клика. В общем, тут всё прозрачно и очевидно.
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503398
Tsyklop
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
hVosttTsyklopTsyklop,

https://jsfiddle.net/3s5b43y8/

У тебя задачи разные, да события срабатывают, но по-разному. Движение может отменить действие клика. В общем, тут всё прозрачно и очевидно.

Не знаю у кого там как, но у меня получилось сделать всего лишь с 3 ивенмати: mousedown, mouseup, mousemove.
...
Рейтинг: 0 / 0
Drag & click на одном элементе JS - JavaScript
    #39503478
Фотография hVostt
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
TsyklopНе знаю у кого там как, но у меня получилось сделать всего лишь с 3 ивенмати: mousedown, mouseup, mousemove.

Ну и отлично :) До поры до времени конечн.
...
Рейтинг: 0 / 0
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Drag & click на одном элементе JS - JavaScript
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]