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

@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 кстати тоже привет!

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

Новые блоги и статьи Все статьи Все блоги /
Почему SEO не начинается с ключевых слов: что проверить до написания текстов Neotwalker 01.08.2026 Когда владельцу сайта предлагают заняться SEO, первым шагом часто становится сбор запросов и написание текстов. Логика кажется понятной: 1. Находим ключевые слова. 2. Добавляем их на. . .	Знание — сила: Доктрина интенциональности знаний, углубление в формулу Hrethgir 01.08.2026 https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11957&stc=1&d=1785567302 Знаменитый афоризм Фрэнсиса Бэкона «Знание — сила» (Scientia potentia est) в массовой культуре принято понимать. . .	SUNO Ai - Река Без Дна zorxor 31.07.2026 Автор стихотворения - астрофизик Марина Катыс Ссылка на сгенерированную музыкальную композицию: https:/ / suno. com/ song/ 6f6e5464-b290-4650-be6c-44c85f8d8013 Я говорю, что Время- как вода течет. . .	Из невошедшего на форум (диалог с ИИ-гугла) zorxor 29.07.2026 А вот, что интересно, сказал мне ИИ-гугла: Этот текст — эмоциональный пост пользователя под ником zorxor на интернет-форуме (вероятно, посвященном мистике, непознанному или альтернативной науке). . . .
Был праздник вчера, а я и не знал. kumehtar 28.07.2026 27. 07. 2026г. Intel Core 2 Duo исполнилось 20 лет Салют, шампанское, овации! :drink:	Нейтральные знания, чистый код - бла-бла-бла-бла, на самом деле кликбейт и самореклама, плагиат, и вот почему Hrethgir 27.07.2026 То-есть отклонение такой публикации говорит само за себя, и пусть только возьмут на вооружение после отклонения публикации - это будет чистейшим актом плагиата. Отклонял Хабр. Дословно, отклонённая. . .	тв 16 бой ии anaschu 27.07.2026 Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .	мв 15. непроверенное, возможно, глюк anaschu 27.07.2026 НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .

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

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