Перемещение таблицы

@natter1 · Регистрация: 30.09.2015

Здравствуйте !

Есть таблица. Можно ли осуществить ее захват дабы перемещать ее мышкой по странице ?

@Whitecolor · 06.01.2026, 22:49

PHP/HTML
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
82
83
84
85
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Перетаскиваемая таблица</title>
    <style>
        table.iksweb {
            position: absolute;     
            width: 40%;
            border-collapse: collapse;
            border-spacing: 0;
            height: auto;
        }
        table.iksweb, table.iksweb td, table.iksweb th {
            border: 1px solid #595959;
        }
        table.iksweb td, table.iksweb th {
            padding: 3px;
            width: 30px;
            height: 35px;
        }
        table.iksweb th {
            background: #4e6982;
            color: #fff; 
            font-weight: normal;
        }
    </style>
</head>
<body>
<table class="iksweb" id="tab">
    <tr>
        <td>1</td>
        <td>3</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>1</td>
        <td>3</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>6</td>
    </tr>
    <tr>
        <td>1</td>
        <td>3</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>4</td>
        <td>6</td>
    </tr>
</table>
<script>
    let isDragging = false;
    let offsetX, offsetY;
 
    tab.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - tab.getBoundingClientRect().left;
        offsetY = e.clientY - tab.getBoundingClientRect().top;
    });
 
    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            tab.style.left = `${e.clientX - offsetX}px`;
            tab.style.top = `${e.clientY - offsetY}px`;
        }
    });
 
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });
</script>
</body>
</html>

@Zloyalex100 · 06.01.2026, 23:35

А у меня что не так? Задача вроде простая, но двигается таблица с id='tab' только вправо и вниз, но не влево и вверх.
Да еще не плавно, а какими-то нервными рывками

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
let test = false;
    const o = () => test = true;
    const t = () => test = false;
    const m = e => {        
        if(test) {
            tab.style.left = e.clientX  - e.offsetX + 'px';
            tab.style.top = e.clientY  - e.offsetY + 'px';
        }
    }
 
    tab.addEventListener('mouseover', o);
    tab.addEventListener('mouseleave', t);
    tab.addEventListener('mousemove', m);

Добавлено через 32 минуты
offset в ячейке высчитывается, а не в самой таблице... Это да. Но не помогло и оборачивание таблицы в div

@voraa · 06.01.2026, 23:49

Сообщение от Zloyalex100

А у меня что не так?

Не так то, что таблица приклеивается верхним левым углом к курсору мыши. И при движении мыши вправо или вверх она выходит из таблицы и происходит mouseleave. А дергается, потому, что при заходе мыши на таблицу в любом месте происходит mouseover и сразу mousemove. И таблица прыгает, что бы встать левым верхним углом на курсор.

@Zloyalex100 · 07.01.2026, 23:00

Вот, прояснилась вроде логика...

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
    let isDragging = false;
    let dragStartX, dragStartY;
    let tableStartX, tableStartY;
    
    const tab = document.getElementById('tab');
    
    tab.addEventListener('mousedown', (e) => {
        isDragging = true;
        dragStartX = e.clientX;
        dragStartY = e.clientY;      
        const rect = tab.getBoundingClientRect();
        tableStartX = rect.left;
        tableStartY = rect.top;
        e.preventDefault();
    });
    
    document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;        
        const deltaX = e.clientX - dragStartX;
        const deltaY = e.clientY - dragStartY;  
        tab.style.left = (tableStartX + deltaX) + 'px';
        tab.style.top = (tableStartY + deltaY) + 'px';
    });
    
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });    
    
    document.addEventListener('mouseleave', () => {
        isDragging = false;
    });

@voraa · 08.01.2026, 00:20

Сообщение от Zloyalex100

Вот, прояснилась вроде логика...

Вот объясни логику.
Зачем при любом движении мыши, что бы пользователь не делал, каждый раз будет вызываться обработчик и выполняться

JavaScript
1
2
document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;

Даже если не тащат никакую таблицу. Просто мышь двигаешь и на каждые 2-5 пикселей вызывается обработчик выполняется проверка и выход.
Зачем, с какого бы элемента не ушел курсор будет выполняться

JavaScript
1
2
3
    document.addEventListener('mouseleave', () => {
        isDragging = false;
    });

Зачем при каждом отпускании клавиши мыши, где бы и когда бы оно не произошло, будет выполняться

JavaScript
1
2
3
    document.addEventListener('mouseup', () => {
        isDragging = false;
    });

В чем тут логика?

А если элементов, которые можно таскать несколько? Как тут эта "логика" сработает?

@Zloyalex100 · 08.01.2026, 00:57

Сообщение от voraa

Вот объясни логику

Мышка таблицу таскает за собой - хоть на этом мерси

Добавлено через 4 минуты

Сообщение от voraa

document.addEventListener

Сообщение от voraa

А если элементов, которые можно таскать несколько?

А про это в ТЗ ничего и не говорилось. Говорилось только про таблицу которая во всем документе одна как перст

Добавлено через 3 минуты

Сообщение от voraa

document

Ну поменяем тогда document на tab

@Zloyalex100 · 08.01.2026, 18:43

Сообщение от voraa

Даже если не тащат никакую таблицу

Вот так нормально?

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
let isDragging = false;
    let dragStartX, dragStartY;
    let tableStartX, tableStartY;
    
    const tab = document.getElementById('tab');
    
    tab.addEventListener('mousedown', e => {
        isDragging = true;
        dragStartX = e.clientX;
        dragStartY = e.clientY;        
        const rect = tab.getBoundingClientRect();
        tableStartX = rect.left;
        tableStartY = rect.top;
        e.preventDefault();
    });
    
    tab.addEventListener('mousemove', e => {
        if (!isDragging) return;        
        const deltaX = e.clientX - dragStartX;
        const deltaY = e.clientY - dragStartY;        
        tab.style.left = (tableStartX + deltaX) + 'px';
        tab.style.top = (tableStartY + deltaY) + 'px';
    });
    
    tab.addEventListener('mouseup', () => {
        isDragging = false;
    });
    
    tab.addEventListener('mouseleave', () => {
        isDragging = false;
    });

@voraa · 08.01.2026, 21:21

Сообщение от Zloyalex100

Вот так нормально?

А сами попробуйте. Посмотрите как таскается.
Что будет, если тащить быстро? А если очень быстро?

@Zloyalex100 · 09.01.2026, 01:13

Сообщение от voraa

Что будет, если тащить быстро? А если очень быстро?

Протащил быстро. Всё нормально. Если "очень быстро" - курсор вылетает за пределы таблицы и она останавливается. Но если не сказали бы что это недостаток - и не подумал бы

Добавлено через 3 часа 30 минут

Сообщение от voraa

тащить быстро

И вообще зачем в вебе что-то там "таскать быстро"? Ну может в веб-играх деяние подобного рода и необходимо, но на обычных веб-страницах оно зачем?
Тащить - это "разворовывать социалистическую собственность". Привет Гайдаю.
Пиву Lowenbrau кстати тоже привет! И как это оно так и не покинуло нас в тяжелый час?

@voraa · 09.01.2026, 08:36

Сообщение от Zloyalex100

Но если не сказали бы что это недостаток - и не подумал бы

Вот должно таскаться, как вы окна в винде таскаете. С такими же эффектами. Если уж делать, то как следует. Тем более, что это ничего не стоит. Код не сложнее и не больше.

Сообщение от Zloyalex100

И вообще зачем в вебе что-то там "таскать быстро"?

Никогда не знаешь, что будет делать пользователь. Ему не объяснишь, как надо (по мнению и умению разработчика). Он все равно будет делать по своему.

Сообщение от Zloyalex100

Пиву Lowenbrau кстати тоже привет!

Не знаю, не пробовал. Мне крылатые зайцы и черные козлы больше нравятся.

Новые блоги и статьи Все статьи Все блоги /
[golang] Insert Delete GetRandom O(1) (Leetcode: 380) alhaos 16.06.2026 Insert Delete GetRandom O(1) Сложность: Medium Источник: LeetCode 380 Задача Реализовать структуру данных RandomizedSet, которая поддерживает следующие операции за O(1) в среднем:	Свет в конце тоннеля kumehtar 16.06.2026 Поймал себя на одной мысли. Раньше мне всегда казалось неправильным жить без чёткого понимания, куда всё идёт. Будто я иду по дороге судьбы, но не знаю, куда она ведёт. А раз не знаю — значит,. . .	[golang] Реализация стека с поддержкой получения минимального элемента за O(1) alhaos 16.06.2026 Min Stack Сложность: Medium Источник: LeetCode 155 Задача: Реализовать стек который поддерживает push, pop, top и получение минимального элемента за O(1). Методы:	[golang] Конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. alhaos 10.06.2026 Задача Реализовать конкурентный fetcher с ограничением максимального количества одновременных HTTP запросов. Сигнатура func Fetch(urls string, maxConcurrent int) Result Пример urls :=. . .
[golang] Состояние гонки (race condition) alhaos 10.06.2026 Состояние гонки (race condition) Состояние гонки (Race Condition) — это ошибка, возникающая при одновременном доступе нескольких горутин к одним и тем же данным без должной синхронизации. При этом. . .	Взрослые отношения, и почему они не получаются kumehtar 09.06.2026 Когда в детстве ребёнок не получает от родителей чего-то важного, он лишается не просто приятных переживаний, а основы для формирования определённых внутренних качеств и навыков. Если ребёнок не. . .	[golang] Worker Pool alhaos 09.06.2026 Worker Pool Worker Pool — паттерн конкурентной обработки задач в Go. Суть: фиксированное количество горутин-воркеров читают задачи из общего канала и пишут результаты в общий канал результатов. . . .	[golang] Pipeline alhaos 08.06.2026 Pipeline Pipeline — паттерн конкурентной обработки данных в Go. Суть: данные проходят через цепочку независимых стадий, каждая из которых работает в своей горутине и общается с соседями через. . .

@natter1 -8 / 5 / 0 Регистрация: 30.09.2015 Сообщений: 360

	Перемещение таблицы 04.01.2026, 18:02. Показов 1106. Ответов 29 Метки нет (Все метки) Здравствуйте ! Есть таблица. Можно ли осуществить ее захват дабы перемещать ее мышкой по странице ? 0