HTML5 Перетаскивание и касание текста

I have a weird issue with drag & drop in HTML5.

Есть 3 целевые зоны, которые являются divs с текстом в них и 1 зоной источника, которая является div, содержащим изображение.

Я использую dragenter и dragleave события, чтобы изменить границу активной целевой зоны для проекта, куда перетаскиваемый объект собирается приземлиться.

Проблема в том, что, как только вы перетаскиваете ее поверх текста, она по какой-то причине запускает событие dragleave, удаляя границу.

Вот пример JSfiddle, иллюстрирующий проблему

И вот какой-то встроенный код:

HTML

Targets

<div class="targets"> <div class="target">I am a target
Touch text while dragging to see the problem</div> <div class="target">I am a target
Touch text while dragging to see the problem</div> <div class="target">I am a target
Touch text while dragging to see the problem</div> </div>

Source

<div class="source" draggable="true"> image </div>

JS

$("div.source").on('dragstart', function(e) {
    $(this).fadeTo('slow', 0.4);
});

$("div.source").on('dragend', function(e) {
    $(this).fadeTo('slow', 1);
});

$("div.target").on('dragover', function(e) {
    if (e.preventDefault) {
        e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
});

$("div.target").on('dragenter', function(e) {
    $(this).addClass('over');
});

$("div.target").on('dragleave', function(e) {
    $(this).removeClass('over');
});

CSS

h1 {
    font-size: 2em;
    text-align: center;
}

.target {
    margin: 1em;
    display:inline-block;
    width: 184px;
    height: 69px;
    border: 5px #995555 solid;
    border-radius: 5px;
    background-color: #AAAAAA;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 0.9em;
}

.target.over {
    border: 5px #0A0 dashed;
}

.source {
    margin: 1em;
    display:inline-block;
    width: 184px;
    height: 69px;
    border: 5px #555599 solid;
    border-radius: 5px;
    background-color: #CCCCCC;
    vertical-align: bottom;
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;      
}

Кто-нибудь знает какие-либо решения по изменению границы даже при касании текста?

Другой вопрос заключается в том, можно ли удерживать границу вокруг исходного div?

On a final note, I realize that both of these things can be done by using jQuery UI draggable and droppable, but I'm specifically wondering if it is possible to do this with native HTML5 drag & drop.

2
nl ja de

1 ответы

Проблема в том, что текст представляет собой дополнительный узел в DOM, а dragleave и dragenter учитывает дочерние элементы, а также родительские элементы. Когда курсор входит в текстовый узел, он оставляет div . Это похоже на mouseout vs mouseleave . Простой способ обойти это, чтобы сохранить подсчет событий и удалить только стиль, когда все они учитываются:

var count=0;
$("div.target").on('dragenter', function(e) {
    $(this).addClass('over');
    count++;
}).on('dragleave', function(e) {
    if (--count<=0) {
        $(this).removeClass('over');
    }
});

This isn't necessarily completely reliable (remember to set count to zero in the drop event), but it'll work better than your current setup. Another option is to not put any content in the div elements at all, instead add it with CSS:

.target:after {
    content: 'I am a target \A Touch text while dragging to see the problem';
    white-space: pre-wrap;
}

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

2
добавлено
@robertc У меня есть аналогичный вопрос здесь о перетаскивании в Javascript. Если возможно, вы можете помочь мне там? Любая помощь будет оценена.
добавлено автор john, источник
Большое вам спасибо, 2-е решение через CSS отлично! Поскольку это только для проекта «для удовольствия», над которым я работаю, доступность не является основной задачей, меня больше интересует поиск чистых решений и изучение относительно новых технологий. Как дополнительный вопрос, есть ли способ сохранить границу при перетаскивании? Еще раз большое спасибо!
добавлено автор Bio2hazard, источник
@ Bio2hazard Я так не думаю, но если у вас есть дополнительный вопрос, задайте дополнительный вопрос.
добавлено автор robertc, источник
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing