Вызов Chrome Drag & Drop: наведите псевдокласс на окружающие элементы

В Chrome я столкнулся с очень неприятным и неожиданным поведением перетаскивания.

Проблема:

Псевдокласс класса :hover запускается и застревает в окружающих элементах, особенно в тех случаях, когда призрачный объект DragElement перекрывает его.

Шаги по воспроизведению проблемы:

  • Пример: http://plnkr.co/edit/PayXodHUtxqUZsM3T2ye , затем просмотр в отдельном окне
  • Нажмите и перетащите любое из номеров.
  • Отбросьте любой из других ящиков со своим призраком, слегка перекрывающим окружающие элементы.

Это происходит в Chrome 35, 36 и 38-бетах. Я также заметил, что это не происходит в кадре Plunker Run с редактором, но происходит в полном окне (см. Выше). Это также происходит в моем приложении node-webkit (где я обнаружил эту проблему).

То, что я пробовал до сих пор:

  • Использование -webkit-user-drag: element; на .box
  • Добавление атрибута draggable="true" для каждого элемента .box, чтобы увидеть, есть ли разница.
  • event.stopPropagation для различных элементов, включая window

Зачем ему запускать :hover для окружающих элементов? Это не имеет никакого смысла. Я собираюсь вырвать волосы!:/

Заранее благодарим всех, кто хочет помочь мне решить эту проблему.

Ответы

Ответ 1

Вы рассматривали интерфейс jQuery? Я знаю, что чем меньше внешних ресурсов, тем лучше, но пользовательский интерфейс jQuery обнаруживает, когда вы перетаскиваете, а затем (как сказал "The Reveler" ), вы можете добавить класс в тело и указать

.bodyIsDragging{
   pointer-events: none
 }

Ответ 2

Можете ли вы добавить класс в свой тег html/body при перетаскивании? Если это возможно, вы можете использовать

.is-dragging * {
  pointer-events: none;
}

где .is-dragging - это класс вашего тела /html а затем переопределить элемент, который вы сейчас перетаскиваете.

Ответ 3

Это сработало для меня (уродливо):

CSS

.is-dragging {
    pointer-events: none;
}

JS: (в событии "drop" )

$('body').addClass('is-dragging');

if (event.clientY < separatorY)
    dragged.insertBefore(target);
else
    dragged.insertAfter(target);

setTimeout(function()
{
    $('body').removeClass('is-dragging');
}, 1);