Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2019, 02:39
Новичок на форуме
Отправить личное сообщение для roms Посмотреть профиль Найти все сообщения от roms
 
Регистрация: 02.12.2019
Сообщений: 1

dragenter/dragleave и дочерние элементы
Добрый день.
Сделал загрузку фотографий на страницу перетаскиванием. Работает.
Для исключения ошибок, хочу подсвечивать адресную ячейку при перетаскивании. Что бы клиент видел, в какую ячейку таблицы он сейчас перетаскивает фото, и не ошибался. Для этого подключил обработчики dragenter/dragleave и повесил изменение фона ячейки.

Сложность:
В ячейке есть вложенный текст.
И когда перетаскивание остаётся в ячейке, но заходит на текст, генерируется dragleave, и выделение снимается.
Причём, обработчиков на вложенном тексте нет. Но почему-то для него тоже генерятся dragenter/dragleave. Что вроде не должно быть, если я правильно понимаю.
А нужно, естественно, что бы пока объект перетаскивается на ячейке, что бы ячейка была подсвечена, независимо от наличия другого текста или вложенных элементов в ячейке.

Что-то не могу найти простого решения. Можно попробовать вешать обработчики на все вложенные элементы, но будет не очень красиво.

Короче:
1) как сделать подсветку ячейки, пока перетаскивание на ней, независимо от дочерних элементов?
2) Почему dragenter/dragleave генерируются на дочерних элементах ячейки, хотя обработчики только на самой ячейке?


<style>
    td.highlighted {
        background-color: Aquamarine;
    }
</style>

<table class='personsTable' id='personsTable'>
    <tr>
        <th>ФИО</th>
        <th>Фотография</th>
    </tr>
    <tr>
        <td><p>Иванов Иван Иванович</p></td>
        <td class='photo'><p>нет фотографии</p></td>
    </tr>
    <tr>
        <td><p>Пётр Петрович Петров</p></td>
        <td class='photo'><p>нет фотографии</p></td>
    </tr>
    <tr>
        <td><p>Сидор Сидорович Сидоров</p></td>
        <td class='photo'><p>нет фотографии</p></td>
    </tr>
</table>


let personsTable = document.getElementById('personsTable');

    let dropTdCollection = personsTable.getElementsByClassName('photo');

    for (let td of dropTdCollection) {

        ['dragenter', 'dragleave', 'dragover', 'drop'].forEach(eventName => {
            td.addEventListener(eventName, preventDefaults, false);
        });

        td.addEventListener('drop', handleDrop, false);
        td.addEventListener('dragenter', highlightOn);
        td.addEventListener('dragleave', highlightOff);

    }

    function preventDefaults(e)
    {
        e.preventDefault();
        e.stopPropagation();
    };

    function highlightOn(e)
    {
        let element = e.target;
            console.log("element="+element);
        element.classList.add('highlighted');
    }
    
    function highlightOff(e)
    {
        let element = e.target;
            console.log("element="+element);
        element.classList.remove('highlighted');
    }

    function handleDrop(e) 
    {
        // загрузка фотографии
    }
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему когда элемент выводится на новую строку его дочерние элементы не появляются? BIOkefirchik Элементы интерфейса 2 29.08.2017 13:32
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
Jquery не учитывает дочерние элементы metaller92 jQuery 2 17.06.2013 11:58
Оnmouseout срабатывает при наведении на дочерние элементы lancer jQuery 0 31.03.2012 08:22
mouseout: Определить дочерние элементы Papa Общие вопросы Javascript 3 03.02.2010 20:29