HTML5 dragleave срабатывает при наведении на дочерний элемент

У меня проблема в том, что dragleaveсобытие элемента вызывается при наведении на дочерний элемент этого элемента. Также dragenterне срабатывает при повторном наведении на родительский элемент.

Я сделал упрощенную скрипку: http://jsfiddle.net/pimvdb/HU6Mk/1/ .

HTML:

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

со следующим JavaScript:

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 dragleave: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

Предполагается, что он должен уведомить пользователя, сделав его divкрасным при перетаскивании чего-либо туда. Это работает, но если вы перетаскиваете на pребенка, dragleaveон уволен и divбольше не красный. Возвращение к падению divтакже не делает его снова красным. Необходимо полностью выйти из капли divи снова перетащить в нее, чтобы она стала красной.

Можно ли предотвратить dragleaveвыстрел при перетаскивании в дочерний элемент?

Обновление 2017 года: TL; DR, найдите CSS, pointer-events: none;как описано в ответе @ HD ниже, который работает в современных браузерах и IE11.

Вам просто нужно сохранить счетчик ссылок, увеличивать его, когда вы получаете перетаскивание, уменьшать, когда вы получаете перетаскивание. Когда счетчик на 0 - удалить класс.

var counter = 0;

$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault(); // needed for IE
        counter++;
        $(this).addClass('red');
    },

    dragleave: function() {
        counter--;
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    }
});

Примечание. В событии сброса сбросьте счетчик до нуля и очистите добавленный класс.

Вы можете запустить его здесь

Можно ли предотвратить запуск Dragleave при перетаскивании в дочерний элемент?

Да.

#drop * {pointer-events: none;}

Этого CSS достаточно для Chrome.

При использовании его с Firefox, #drop не должно иметь текстовых узлов напрямую (иначе есть странная проблема, когда элемент «оставь это себе» ), поэтому я предлагаю оставить его только с одним элементом (например, использовать div внутри #drop положить все внутрь)

Вот jsfiddle, решающий оригинальный вопрос (сломанный) пример .

Я также сделал упрощенную версию разветвленной из примера @Theodore Brown, но основанную только на этом CSS.

Однако не во всех браузерах реализован этот CSS: http://caniuse.com/pointer-events

Увидев исходный код Facebook, я мог найти это pointer-events: none;несколько раз, но, вероятно, он использовался вместе с грациозным отказом от деградации. По крайней мере, это так просто и решает проблему для многих сред.

Здесь самое простое кросс-браузерное решение (серьезно):

jsfiddle <- попробуйте перетащить какой-нибудь файл в поле

Вы можете сделать что-то подобное:

var dropZone= document.getElementById('box');
var dropMask = document.getElementById('drop-mask');

dropZone.addEventListener('dragover', drag_over, false);
dropMask.addEventListener('dragleave', drag_leave, false);
dropMask.addEventListener('drop', drag_drop, false);

В нескольких словах, вы создаете «маску» внутри зоны сброса, с унаследованной шириной и высотой, абсолютной позицией, которая будет отображаться только тогда, когда начинается драгувер.
Итак, после показа этой маски, вы можете сделать трюк, прикрепив к ней другие события Dragleave & Drop.

После ухода или падения вы просто снова прячете маску.
Просто и без осложнений.

(Обс .: совет Грега Петтита - Вы должны быть уверены, что маска нависает над всей коробкой, включая границы)

Прошло довольно много времени после того, как этот вопрос был задан, и было предложено множество решений (включая некрасивые хаки).

Мне удалось решить ту же проблему, с которой я столкнулся недавно благодаря ответу в этом ответе, и подумал, что это может быть полезно для тех, кто заходит на эту страницу. Вся идея заключается в том, чтобы хранить evenet.targetв ondrageenterкаждый раз, когда он вызывается на любом из родительских или дочерних элементов. Затем ondragleaveпроверьте, соответствует ли текущий target ( event.target) объекту, в котором вы храните ondragenter.

Единственный случай, когда эти два значения совпадают, это когда ваше перетаскивание покидает окно браузера.

Причина, по которой это работает нормально, заключается в том, что мышь покидает элемент (скажем el1) и вводит другой элемент (скажем el2), сначала el2.ondragenterвызывается, а затем el1.ondragleave. Только когда перетаскивание покидает / входит в окно браузера, event.targetбудет ''в обоих el2.ondragenter и el1.ondragleave.

Вот мой рабочий образец. Я проверил это на IE9 +, Chrome, Firefox и Safari.

(function() {
    var bodyEl = document.body;
    var flupDiv = document.getElementById('file-drop-area');

    flupDiv.onclick = function(event){
        console.log('HEy! some one clicked me!');
    };

    var enterTarget = null;

    document.ondragenter = function(event) {
        console.log('on drag enter: ' + event.target.id);
        enterTarget = event.target;
        event.stopPropagation();
        event.preventDefault();
        flupDiv.className = 'flup-drag-on-top';
        return false;
    };

    document.ondragleave = function(event) {
        console.log('on drag leave: currentTarget: ' + event.target.id + ', old target: ' + enterTarget.id);
        //Only if the two target are equal it means the drag has left the window
        if (enterTarget == event.target){
            event.stopPropagation();
            event.preventDefault();
            flupDiv.className = 'flup-no-drag';         
        }
    };
    document.ondrop = function(event) {
        console.log('on drop: ' + event.target.id);
        event.stopPropagation();
        event.preventDefault();
        flupDiv.className = 'flup-no-drag';
        return false;
    };
})();

А вот простая HTML-страница:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple File Uploader</title>
<link rel="stylesheet" href="my.css" />
</head>
<body id="bodyDiv">
    <div id="cntnr" class="flup-container">
        <div id="file-drop-area" class="flup-no-drag">blah blah</div>
    </div>
    <script src="my.js"></script>
</body>
</html>

При правильном оформлении я сделал внутренний раздел (# file-drop-area) намного больше, когда файл перетаскивается на экран, чтобы пользователь мог легко поместить файлы в нужное место.

«Правильный» способ решить эту проблему - отключить события указателя на дочерних элементах цели удаления (как в ответе @ HD). Вот jsFiddle, который я создал, который демонстрирует эту технику . К сожалению, это не работает в версиях Internet Explorer до IE11, так как они не поддерживали события указателя .

К счастью, я был в состоянии придумать обходной путь , который делает работу в старых версиях IE. По сути, это включает в себя выявление и игнорирование dragleaveсобытий, которые происходят при перетаскивании на дочерние элементы. Поскольку dragenterсобытие вызывается на дочерних узлах до dragleaveсобытия на родительском узле, к каждому дочернему узлу можно добавить отдельных прослушивателей событий, которые добавляют или удаляют класс ignore-drag-left из цели удаления. Тогда dragleaveпрослушиватель события целевой цели может просто игнорировать вызовы, которые происходят, когда этот класс существует. Вот jsFiddle, демонстрирующий этот обходной путь . Он протестирован и работает в Chrome, Firefox и IE8 +.

Обновить:

Я создал jsFiddle, демонстрирующий комбинированное решение с использованием обнаружения функций, в котором используются события указателя, если они поддерживаются (в настоящее время Chrome, Firefox и IE11), и браузер возвращается к добавлению событий в дочерние узлы, если поддержка событий указателя недоступна (IE8 -10).

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

Я пробовал различные методы проверки, чтобы увидеть, e.targetсовпадает ли thisэлемент с элементом, но не смог добиться какого-либо улучшения.

Способ, которым я исправил эту проблему, был немного взломан, но работает на 100%.

dragleave: function(e) {
               // Get the location on screen of the element.
               var rect = this.getBoundingClientRect();

               // Check the mouseEvent coordinates are outside of the rectangle
               if(e.x > rect.left + rect.width || e.x < rect.left
               || e.y > rect.top + rect.height || e.y < rect.top) {
                   $(this).removeClass('red');
               }
           }

если вы используете HTML5, вы можете получить clientRect родительского:

let rect = document.getElementById("drag").getBoundingClientRect();

Затем в parent.dragleave ():

dragleave(e) {
    if(e.clientY < rect.top || e.clientY >= rect.bottom || e.clientX < rect.left || e.clientX >= rect.right) {
        //real leave
    }
}

вот jsfiddle

Очень простое решение - использовать pointer-eventsсвойство CSS . Просто установите его значение noneна dragstart для каждого дочернего элемента. Эти элементы больше не будут вызывать связанные с мышью события, поэтому они не будут ловить мышь над ними и, следовательно, не будут вызывать перетаскивание на родительском элементе .

Не забудьте установить это свойство обратно autoпри завершении перетаскивания;)

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

if (evt.currentTarget.contains(evt.relatedTarget)) {
  return;
}

Очень простое решение:

parent.addEventListener('dragleave', function(evt) {
    if (!parent.contains(evt.relatedTarget)) {
        // Here it is only dragleave on the parent
    }
}

Вы можете исправить это в Firefox с небольшим вдохновением из исходного кода jQuery :

dragleave: function(e) {
    var related = e.relatedTarget,
        inside = false;

    if (related !== this) {

        if (related) {
            inside = jQuery.contains(this, related);
        }

        if (!inside) {

            $(this).removeClass('red');
        }
    }

}

К сожалению, это не работает в Chrome, потому что, relatedTargetпохоже, не существует в dragleaveсобытиях, и я предполагаю, что вы работаете в Chrome, потому что ваш пример не работал в Firefox. Вот версия с реализованным выше кодом.

И вот оно, решение для Chrome:

.bind('dragleave', function(event) {
                    var rect = this.getBoundingClientRect();
                    var getXY = function getCursorPosition(event) {
                        var x, y;

                        if (typeof event.clientX === 'undefined') {
                            // try touch screen
                            x = event.pageX + document.documentElement.scrollLeft;
                            y = event.pageY + document.documentElement.scrollTop;
                        } else {
                            x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
                            y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
                        }

                        return { x: x, y : y };
                    };

                    var e = getXY(event.originalEvent);

                    // Check the mouseEvent coordinates are outside of the rectangle
                    if (e.x > rect.left + rect.width - 1 || e.x < rect.left || e.y > rect.top + rect.height - 1 || e.y < rect.top) {
                        console.log('Drag is really out of area!');
                    }
                })

Вот еще одно решение с использованием document.elementFromPoint:

 dragleave: function(event) {
   var event = event.originalEvent || event;
   var newElement = document.elementFromPoint(event.pageX, event.pageY);
   if (!this.contains(newElement)) {
     $(this).removeClass('red');
   }
}

Надеюсь, что это работает, вот скрипка .

Простое решение - добавить правило css pointer-events: noneв дочерний компонент, чтобы предотвратить срабатывание триггера ondragleave. Смотрите пример:

function enter(event) {
  document.querySelector('div').style.border = '1px dashed blue';
}

function leave(event) {
  document.querySelector('div').style.border = '';
}

div {
  border: 1px dashed silver;
  padding: 16px;
  margin: 8px;
}

article {
  border: 1px solid silver;
  padding: 8px;
  margin: 8px;
}

p {
  pointer-events: none;
  background: whitesmoke;
}

<article draggable="true">drag me</article>

<div ondragenter="enter(event)" ondragleave="leave(event)">
  drop here
  <p>child not triggering dragleave</p>
</div>

Не уверен, что это кросс-браузер, но я тестировал в Chrome, и это решает мою проблему:

Я хочу перетащить файл на всю страницу, но моя перетаскивание срабатывает, когда я перетаскиваю дочерний элемент. Мое исправление было посмотреть на х и у мыши:

У меня есть div, который перекрывает всю мою страницу, когда страница загружается, я скрываю это.

когда вы перетаскиваете документ, я показываю его, а когда вы опускаете родительский элемент, он обрабатывает его, а когда вы покидаете родительский элемент, я проверяю x и y.

$('#draganddrop-wrapper').hide();

$(document).bind('dragenter', function(event) {
    $('#draganddrop-wrapper').fadeIn(500);
    return false;
});

$("#draganddrop-wrapper").bind('dragover', function(event) {
    return false;
}).bind('dragleave', function(event) {
    if( window.event.pageX == 0 || window.event.pageY == 0 ) {
        $(this).fadeOut(500);
        return false;
    }
}).bind('drop', function(event) {
    handleDrop(event);

    $(this).fadeOut(500);
    return false;
});

Я написал небольшую библиотеку Dragster для решения этой конкретной проблемы, которая работает везде, кроме тихого бездействия в IE (который не поддерживает конструкторы событий DOM, но было бы довольно легко написать нечто подобное с помощью пользовательских событий jQuery)

У меня возникла та же проблема, и я попытался использовать решение pk7s. Это сработало, но можно было бы сделать немного лучше без каких-либо дополнительных элементов DOM.

По сути, идея та же самая - добавить дополнительное невидимое наложение поверх области, которую можно опустить. Только давайте делать это без каких-либо дополнительных элементов DOM. Вот часть, где псевдоэлементы CSS вступают в игру.

Javascript

var dragOver = function (e) {
    e.preventDefault();
    this.classList.add('overlay');
};

var dragLeave = function (e) {
    this.classList.remove('overlay');
};


var dragDrop = function (e) {
    this.classList.remove('overlay');
    window.alert('Dropped');
};

var dropArea = document.getElementById('box');

dropArea.addEventListener('dragover', dragOver, false);
dropArea.addEventListener('dragleave', dragLeave, false);
dropArea.addEventListener('drop', dragDrop, false);

CSS

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

#box.overlay:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}

Вот полное решение: http://jsfiddle.net/F6GDq/8/

Я надеюсь, что это поможет любому с той же проблемой.

Просто проверьте, является ли перетаскиваемый элемент дочерним, если это так, то не удаляйте свой класс стиля dragover. Довольно просто и работает для меня:

 $yourElement.on('dragleave dragend drop', function(e) {
      if(!$yourElement.has(e.target).length){
           $yourElement.removeClass('is-dragover');
      }
  })

Я столкнулся с той же проблемой, и вот мое решение, которое, я думаю, намного проще, чем выше. Я не уверен, что это кроссбраузер (может зависеть даже от порядка пузырьков)

Я буду использовать jQuery для простоты, но решение должно быть независимым от фреймворка.

Событие переходит к родителю в любом случае так:

<div class="parent">Parent <span>Child</span></div>

Мы прикрепляем события

el = $('.parent')
setHover = function(){ el.addClass('hovered') }
onEnter  = function(){ setTimeout(setHover, 1) }
onLeave  = function(){ el.removeClass('hovered') } 
$('.parent').bind('dragenter', onEnter).bind('dragleave', onLeave)

И это все. :) это работает, потому что хотя onEnter на дочернем объекте срабатывает перед onLeave на родительском, мы немного задерживаем его, изменяя порядок, поэтому сначала класс удаляется, а затем повторно вызывается через миллисекунду.

Я написал модуль drag-and-drop под названием drip-drop, который, среди прочего, исправляет это странное поведение. Если вы ищете хороший низкоуровневый модуль перетаскивания, который вы можете использовать в качестве основы для чего-либо (загрузка файлов, перетаскивание в приложении, перетаскивание из или на внешние источники), вам следует проверить это модуль из:

https://github.com/fresheneesz/drip-drop

Вот как вы будете делать то, что вы пытаетесь сделать в капельном режиме:

$('#drop').each(function(node) {
  dripDrop.drop(node, {
    enter: function() {
      $(node).addClass('red')  
    },
    leave: function() {
      $(node).removeClass('red')
    }
  })
})
$('#drag').each(function(node) {
  dripDrop.drag(node, {
    start: function(setData) {
      setData("text", "test") // if you're gonna do text, just do 'text' so its compatible with IE's awful and restrictive API
      return "copy"
    },
    leave: function() {
      $(node).removeClass('red')
    }
  })
})

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

var counter = 0;    
$('#drop').bind({
    dragenter: function(ev) {
        ev.preventDefault()
        counter++
        if(counter === 1) {
          $(this).addClass('red')
        }
    },

    dragleave: function() {
        counter--
        if (counter === 0) { 
            $(this).removeClass('red');
        }
    },
    drop: function() {
        counter = 0 // reset because a dragleave won't happen in this case
    }
});

Альтернативное рабочее решение, немного проще.

//Note: Due to a bug with Chrome the 'dragleave' event is fired when hovering the dropzone, then
//      we must check the mouse coordinates to be sure that the event was fired only when 
//      leaving the window.
//Facts:
//  - [Firefox/IE] e.originalEvent.clientX < 0 when the mouse is outside the window
//  - [Firefox/IE] e.originalEvent.clientY < 0 when the mouse is outside the window
//  - [Chrome/Opera] e.originalEvent.clientX == 0 when the mouse is outside the window
//  - [Chrome/Opera] e.originalEvent.clientY == 0 when the mouse is outside the window
//  - [Opera(12.14)] e.originalEvent.clientX and e.originalEvent.clientY never get
//                   zeroed if the mouse leaves the windows too quickly.
if (e.originalEvent.clientX <= 0 || e.originalEvent.clientY <= 0) {

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

Вот как я это решил, также добавив подходящие подсказки для пользователя.

$(document).on('dragstart dragenter dragover', function(event) {    
    // Only file drag-n-drops allowed, http://jsfiddle.net/guYWx/16/
    if ($.inArray('Files', event.originalEvent.dataTransfer.types) > -1) {
        // Needed to allow effectAllowed, dropEffect to take effect
        event.stopPropagation();
        // Needed to allow effectAllowed, dropEffect to take effect
        event.preventDefault();

        $('.dropzone').addClass('dropzone-hilight').show();     // Hilight the drop zone
        dropZoneVisible= true;

        // http://www.html5rocks.com/en/tutorials/dnd/basics/
        // http://api.jquery.com/category/events/event-object/
        event.originalEvent.dataTransfer.effectAllowed= 'none';
        event.originalEvent.dataTransfer.dropEffect= 'none';

         // .dropzone .message
        if($(event.target).hasClass('dropzone') || $(event.target).hasClass('message')) {
            event.originalEvent.dataTransfer.effectAllowed= 'copyMove';
            event.originalEvent.dataTransfer.dropEffect= 'move';
        } 
    }
}).on('drop dragleave dragend', function (event) {  
    dropZoneVisible= false;

    clearTimeout(dropZoneTimer);
    dropZoneTimer= setTimeout( function(){
        if( !dropZoneVisible ) {
            $('.dropzone').hide().removeClass('dropzone-hilight'); 
        }
    }, dropZoneHideDelay); // dropZoneHideDelay= 70, but anything above 50 is better
});

У меня была похожая проблема - мой код для скрытия dropzone на событии dragleave для body был запущен одновременно, когда парящие дочерние элементы вызывали мерцание dropzone в Google Chrome.

Я смог решить эту проблему, запланировав функцию скрытия дропзоны, а не вызывая ее сразу. Затем, если запускается другой драговер или драглэйв, запланированный вызов функции отменяется.

body.addEventListener('dragover', function() {
    clearTimeout(body_dragleave_timeout);
    show_dropzone();
}, false);

body.addEventListener('dragleave', function() {
    clearTimeout(body_dragleave_timeout);
    body_dragleave_timeout = setTimeout(show_upload_form, 100);
}, false);

dropzone.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropzone.addClass("hover");
}, false);

dropzone.addEventListener('dragleave', function(event) {
    dropzone.removeClass("hover");
}, false);

« DragLeave » событие вызывается , когда указатель мыши покидает зону перетаскивания целевого контейнера.

Это имеет большой смысл, так как во многих случаях может сбрасываться только родитель, а не потомки. Я думаю, что event.stopPropogation () должен был обработать этот случай, но кажется, что он не работает.

Вышеупомянутые решения, кажется, работают в большинстве случаев, но не работают в случае тех дочерних элементов, которые не поддерживают события dragenter / dragleave , такие как iframe .

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

function isAncestor(node, target) {
    if (node === target) return false;
    while(node.parentNode) {
        if (node.parentNode === target)
            return true;
        node=node.parentNode;
    }
    return false;
}

var container = document.getElementById("dropbox");
container.addEventListener("dragenter", function() {
    container.classList.add("dragging");
});

container.addEventListener("dragleave", function(e) {
    if (!isAncestor(e.relatedTarget, container))
        container.classList.remove("dragging");
});

Вы можете найти рабочую скрипку здесь !

Решено ..!

Объявите любой массив для ex:

targetCollection : any[] 

dragenter: function(e) {
    this.targetCollection.push(e.target); // For each dragEnter we are adding the target to targetCollection 
    $(this).addClass('red');
},

dragleave: function() {
    this.targetCollection.pop(); // For every dragLeave we will pop the previous target from targetCollection
    if(this.targetCollection.length == 0) // When the collection will get empty we will remove class red
    $(this).removeClass('red');
}

Не нужно беспокоиться о дочерних элементах.

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

В моем примере ниже у меня есть таблица, где я хочу иметь возможность обмениваться содержимым строк таблицы друг с другом с помощью API перетаскивания. В dragenter, класс CSS должен быть добавлен к строке элемента , в котором вы сейчас тащит свой элемент, чтобы выделить его, и на dragleaveэтот класс должен быть удален.

Пример:

Очень простая таблица HTML:

<table>
  <tr>
    <td draggable="true" class="table-cell">Hello</td>
  </tr>
  <tr>
    <td draggable="true" clas="table-cell">There</td>
  </tr>
</table>

А функция DragEnter обработчик события добавляется на каждую ячейку таблицы (кроме dragstart, dragover, dropи dragendобработчики, которые не являются специфическими для этого вопроса, поэтому не скопированные здесь):

/*##############################################################################
##                              Dragenter Handler                             ##
##############################################################################*/

// When dragging over the text node of a table cell (the text in a table cell),
// while previously being over the table cell element, the dragleave event gets
// fired, which stops the highlighting of the currently dragged cell. To avoid
// this problem and any coding around to fight it, everything has been
// programmed with the dragenter event handler only; no more dragleave needed

// For the dragenter event, e.target corresponds to the element into which the
// drag enters. This fact has been used to program the code as follows:

var previousRow = null;

function handleDragEnter(e) {
  // Assure that dragenter code is only executed when entering an element (and
  // for example not when entering a text node)
  if (e.target.nodeType === 1) {
    // Get the currently entered row
    let currentRow = this.closest('tr');
    // Check if the currently entered row is different from the row entered via
    // the last drag
    if (previousRow !== null) {
      if (currentRow !== previousRow) {
        // If so, remove the class responsible for highlighting it via CSS from
        // it
        previousRow.className = "";
      }
    }
    // Each time an HTML element is entered, add the class responsible for
    // highlighting it via CSS onto its containing row (or onto itself, if row)
    currentRow.className = "ready-for-drop";
    // To know which row has been the last one entered when this function will
    // be called again, assign the previousRow variable of the global scope onto
    // the currentRow from this function run
    previousRow = currentRow;
  }
}

В коде остались очень простые комментарии, так что этот код подходит и для начинающих. Надеюсь, это поможет вам! Обратите внимание, что вам, конечно, нужно добавить всех прослушивателей событий, о которых я упоминал выше, в каждую ячейку таблицы, чтобы это работало.

Вот еще один подход, основанный на времени событий.

dragenterСобытие отправляется из дочернего элемента может быть захвачено родительским элементом , и это всегда происходит перед dragleave. Время между этими двумя событиями действительно короткое, короче, чем любое возможное действие мыши. Таким образом, идея состоит в том, чтобы запомнить время, когда dragenterпроисходит, и отфильтровать dragleaveсобытия, которые происходят "не слишком быстро" после ...

Этот короткий пример работает на Chrome и Firefox:

var node = document.getElementById('someNodeId'),
    on   = function(elem, evt, fn) { elem.addEventListener(evt, fn, false) },
    time = 0;

on(node, 'dragenter', function(e) {
    e.preventDefault();
    time = (new Date).getTime();
    // Drag start
})

on(node, 'dragleave', function(e) {
    e.preventDefault();
    if ((new Date).getTime() - time > 5) {
         // Drag end
    }
})

pimvdb ..

Почему бы вам не попробовать использовать drop вместо dragleave . Это сработало для меня. надеюсь, что это решит вашу проблему.

Пожалуйста, проверьте jsFiddle: http://jsfiddle.net/HU6Mk/118/

$('#drop').bind({
                 dragenter: function() {
                     $(this).addClass('red');
                 },

                 drop: function() {
                     $(this).removeClass('red');
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });

Вы можете использовать тайм-аут с transitioningфлагом и прослушивать верхний элемент. dragenter/ dragleaveот дочерних событий будет всплывать до контейнера.

Так dragenterкак дочерний элемент запускается перед dragleaveконтейнером, мы установим флаг show как переходный на 1 мс ... dragleaveслушатель проверит флаг на наличие 1 мс.

Флаг будет истинным только при переходах к дочерним элементам и не будет истинным при переходе к родительскому элементу (контейнера)

var $el = $('#drop-container'),
    transitioning = false;

$el.on('dragenter', function(e) {

  // temporarily set the transitioning flag for 1 ms
  transitioning = true;
  setTimeout(function() {
    transitioning = false;
  }, 1);

  $el.toggleClass('dragging', true);

  e.preventDefault();
  e.stopPropagation();
});

// dragleave fires immediately after dragenter, before 1ms timeout
$el.on('dragleave', function(e) {

  // check for transitioning flag to determine if were transitioning to a child element
  // if not transitioning, we are leaving the container element
  if (transitioning === false) {
    $el.toggleClass('dragging', false);
  }

  e.preventDefault();
  e.stopPropagation();
});

// to allow drop event listener to work
$el.on('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
});

$el.on('drop', function(e) {
  alert("drop!");
});

jsfiddle: http://jsfiddle.net/ilovett/U7mJj/

Вам необходимо удалить события указателя для всех дочерних объектов цели перетаскивания.

function disableChildPointerEvents(targetObj) {
        var cList = parentObj.childNodes
        for (i = 0; i < cList.length; ++i) {
            try{
                cList[i].style.pointerEvents = 'none'
                if (cList[i].hasChildNodes()) disableChildPointerEvents(cList[i])
            } catch (err) {
                //
            }
        }
    }