Dragenter Dragenter aninhado.

Question

Estou criando um calendário usando o html5 Arraste e solte a API.

estou usando dragEnter e dragLeave Para estilizar o elemento de recebimento e determinar a droga.

O elemento droppable receptor tem filhos e dragLeave está sendo chamado ao arrastar um elemento filho. Este problema é conhecido e descrito aqui.

Minha tentativa de solução era adicionar dragLeave e dragEnter Eventos nas crianças e passam a lógica de volta para o Parentview.

Aqui está o código. http://jsbin.com/ihanupo/17

O problema é que o 'dragenter' na criança é chamado antes de 'arrastar' para o pai.

Esta é a ordem dos eventos.

#in from outside parent to over child
1. parent-enter 
2. child-enter 
3. parent-leave
#out from over child to outside parent
1. parent-enter
2. child-leave
3. parent-leave

Isso é um inseto?

Alguém conhece uma maneira de emberada para impedir o dragLeave Evento do pai de disparar ao passar o mouse sobre uma criança?

Ou uma maneira de corrigir a ordem em que eventos dragLeave, dragEnter incêndio?

Devo abandonar o arrastar e soltar nativo html5 e usar jQuery ui draggable/droppable?

EDITAR

Aqui está um exemplo de funcionamento, de acordo com a resposta de Woody.

http://jsbin.com/ojagabuj/22

Answer 1

Espero que isso possa ajudá -lo, embora não seja brasa, talvez você possa usar isso. Eu tive uma experiência razoável de arrastar e cair HTML5 e é um pouco irritante, mas se você quiser coisas legais como arrastar e soltar, vale a pena o esforço.

var ignoreNextLeave = false;

$("#outerDragTarget").on("dragenter", function(ev) {
   // not interested in dragleaves from my children...
   if (ev.target !== this) {
      ignoreNextLeave = true;
   }

   $(this).addClass("dragover");

}).on("dragleave", function(ev) {

   if (ignoreNextLeave) {
      ignoreNextLeave = false;
      return;
   }

   $(this).removeClass("dragover");
});

$("#innerDragTarget").on("dragleave", function(ev) {
  ev.stopPropagation();
});

Você pode executá -lo aqui

O truque é cancelar a propagação de dragleaves do elemento interno e observar que, quando o arrasto entra nos incêndios no pai e o alvo não é o pai, estamos prestes a tirar uma licença de arrasto em que não estamos interessados. Não é o ideal, mas Pode ser considerado em algo que você pode usar.

Answer 2

Eu acho que a solução de Woody está correta, mas se você deseja economizar algumas linhas de código e evitar ter que mexer diretamente com os elementos filhos, também pode usar uma solução de contagem de referência:

$(".drop-target").on("dragenter dragleave", function (e)
{
  var dragHoverCount = Number($(this).data("dragHoverCount")) || 0;
  (e.type === "dragenter") ? dragHoverCount++ : dragHoverCount--;
  $(this).data("dragHoverCount", dragHoverCount);

  $(this).toggleClass("drag-hover", dragHoverCount > 0);

  e.preventDefault();
});