Angular directive preventing default action but Chrome still loading image on drag

Question

Angular directive preventing default action but Chrome still loading image on drag

Has anyone encountered an issue with an angular directive that is not successfully preventing Chrome's default action?

Below is the code for the directive in question:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
    }
  };
});

Here is the corresponding html snippet:

<div style="width: 500px; height:500px; background-color: red;" file-drag></div>

I am facing difficulties getting Chrome to refrain from opening the image in a new tab when dragging it onto the specified element. Any suggestions on how to resolve this issue?

javascript angularjs google-chrome

Answer 1

Answer №1

It is important to always remember to preventDefault when handling the dragover event. To ensure proper functionality, update your code as shown below:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
      elem.bind('dragover', function(e){
        e.preventDefault();
      });
    }
  };
});

Answer 2

It is important to always remember to preventDefault when handling the dragover event. To ensure proper functionality, update your code as shown below:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
      elem.bind('dragover', function(e){
        e.preventDefault();
      });
    }
  };
});

Angular directive preventing default action but Chrome still loading image on drag

Answer №1

Similar questions

Focus on all of the individual items except for the one that was just selected

Can you explain the functionality of this Observable in the context of this Angular 2 example?

Select the Best jQuery Package

How to retrieve properties of the final item in an array using Vue.js

Instructions for incorporating highcharts sub modules into a React application

The process of deploying production-ready code using webpack and angular2

Having trouble getting Angular-UI-Select to work with a basic variable on $scope?

What is the process of uploading files using Ajax?

Angular foreach method encounters a syntax issue

Node is not functioning properly with Discord.js as expected

Getting started with jquery plugins: installation and usage

What are the steps to implement routing with angular-ui-router?

Integrating draw2d into Mean.js: A Step-by-Step Guide

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

Combining three.js geometry and selecting objects with an octree

Implementing sound playback within an AJAX response

Troubleshooting issue with TypeScript: Union types not functioning correctly when mapping object values

"Limitation observed - function operates only on first attempt

Comprehending the Syntax of the ExtJS Framework

Jade: Incorporating a JavaScript file at a specific location