Firefox html5 перетаскивание не работает

Question

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

У меня есть 2 угловых указателя (перетаскивание) и одна угловая фабрика (dndAPI). Все это основано на fisshy's Angular Drag and Drop on github.

Наконец-то я получил firefox, чтобы принять и перетащить движение, добавив данные в событие, однако я не могу заставить его не выполнять его поведение по умолчанию (и загружать эти данные в качестве URL-адреса). Я также извиняюсь, что не мог заставить его работать вообще на jsfiddle ... вообще. Я попробую еще раз, если кто-то не увидит, что я делаю что-то возмутительно неправильно.

angular.module('dragAndDrop', []) 
.directive('drag',function (dndApi) { 

    var drags = [], 
     dragging = new RegExp('(\\s|^)dragging(\\s|$)'); 

    return { 
     restrict: 'A', 
     scope: { 
      item: '=drag', 
      whenStart: '&', 
      whenEnd: '&', 
      dropzones: '=' 
     }, 
     link: function (scope, elem, attr, ctrl) { 

      elem.bind('dragstart', function (e) { 
       angular.element('query-tool-tip').removeClass('active'); 
       //if (drags.length === 0) { 
       drags = document.querySelectorAll('.drop'); 
       //} 

       angular.forEach(drags, function (value, key) { 
        if (scope.dropzones.indexOf(value.getAttribute('drop')) >= 0) { 
         value.className = value.className + ' dragging'; 
        } 
       }); 

       elem.addClass('dragging'); 

       dndApi.setData(scope.item, scope.dropzones); 

       e.originalEvent.dataTransfer.effectAllowed = 'move'; 

       //KEEPS FIREFOX FROM CRAPPING OUT: 
       e.originalEvent.dataTransfer.setData('text/plain', 'stop'); 

       scope.$apply(function() { 
        scope.whenStart({ data: dndApi.getData() }); 
       }); 

      }); 

      elem.bind('dragleave', function(e){}); 

      elem.bind('dragend', function (e) { 

       elem.removeClass('dragging'); 

       angular.forEach(drags, function (value, key) { 
        value.className = value.className.replace(dragging, ''); 
       }); 

       scope.$apply(function() { 
        scope.whenEnd({ data: dndApi.getData() }); 
       }); 

       dndApi.removeData(); 

       e.preventDefault(); 

      }); 

      elem[0].draggable = true; 

      elem[0].className = elem[0].className + ' drag'; 

     } 
    }; 
}).directive('drop',function (dndApi) { 

    var drags = [], 
     dragging = new RegExp('(\\s|^)dragging(\\s|$)'); 

    return { 
     scope: { 
      drop: '=drop', 
      whenDrop: '&', 
      whenEnter: '&', 
      whenLeave: '&', 
      queryIndex: "=queryIndex", 
      hideElem: '=' 
     }, 
     link: function (scope, elem, attr, ctrl) { 

      var left = elem[0].offsetLeft, 
       right = left + elem[0].offsetWidth, 
       top = elem[0].offsetTop, 
       bottom = top + elem[0].offsetHeight; 

      elem.bind('drop', function (e) { 

       // e.originalEvent.preventDefault(); 


       //if (e.stopPropagation()) { 
       // e.stopPropagation(); 
       //e.originalEvent.stopPropagation(); 
        //e.preventDefault(); 
       //e.originalEvent.preventDefault(); 
       //} 

       e.originalEvent.dataTransfer.clearData(); 

       if (dndApi.getDropZones().indexOf(scope.drop) >= 0) { 
        scope.$apply(function() { 
         scope.whenDrop({ data: dndApi.getData(), queryI: scope.queryIndex }); 
        }); 
       } 

       if (drags.length === 0) { 
        drags = document.querySelectorAll('.drop'); 
       } 

       angular.forEach(drags, function (value, key) { 

        value.className = value.className.replace(dragging, ''); 

       }); 

       dndApi.removeData(); 

       e.stopPropagation(); 
       e.originalEvent.stopPropagation(); 
       e.preventDefault(); 
       e.originalEvent.preventDefault(); 

      }); 

      elem.bind('dragenter', function (e) { 
       e.preventDefault(); 
       e.originalEvent.preventDefault(); 

       if (elem[0] == e.target) { 
        scope.$apply(function() { 
         scope.whenEnter({ data: dndApi.getData() }); 
        }); 
       } 


       return false; 

      }); 

      elem.bind('dragleave', function (e) { 
       e.preventDefault(); 
       e.originalEvent.preventDefault(); 


       if ((e.x < left || e.x > right) || 
        (e.y < top || e.y > bottom)) { 
        scope.$apply(function() { 
         scope.whenLeave({ data: dndApi.getData() }); 
        }); 
       } 

       return false; 
      }); 

      elem.bind('dragover', function (e) { 

       //if (e.preventDefault) { 
        e.preventDefault(); 
       e.originalEvent.preventDefault(); 
       //} 

       return false; 

      }); 

      elem[0].className = elem[0].className + ' drop'; 
      scope.$watch('hideElem', function() { 
       if (scope.hideElem === true) { 
        elem.hide(); 
       } else { 
        elem.show(); 
       } 
      }); 

     } 
    }; 
}).factory('dndApi', function() { 

    var dnd = { 
     dragObject: {}, 
     dropzones: [] 
    }; 

    return { 
     setData: function (data, areas) { 
      dnd.dragObject = data; 
      dnd.dropzones = areas; 
     }, 
     removeData: function() { 
      dnd.dragObject = null; 
      dnd.dropZones = []; 
     }, 
     getData: function() { 
      return dnd.dragObject; 
     }, 
     getDropZones: function() { 
      return dnd.dropzones; 
     } 
    }; 
}); 

Я сделал много того, что рекомендуется по другим вопросам. Я добавил event.preventDefault() в области dragenter и dragleave. А потом, когда это не сработало, я добавил их повсюду. У меня такое чувство, что это связано с моим методом drop. Если я положил event.prevendDefault() в начале привязки, остальная часть моего кода не будет выполнена.

Любой совет, даже если это что-то маленькое, что я мог упустить, будет полезно.

Спасибо!

Answer 1

Вы вызываете e.originalEvent.dataTransfer.clearData(); в обработчик события переадресации, из-за которого будет вызываться исключение (у вас не будет разрешения на изменение исходного объекта dataTransfer). Это предотвращает вызов e.originalEvent.preventDefault();.