Drag and drop in AngularJS: make a directive that is a drop zone, showing an overlay when dragging


Tags: javascript,css,angularjs,drag-and-drop

Problem :

What I want to achieve

Create a directive, let's call it dropZone, in which I can put some html (e.g. a form). When the user drags a file into the web page, I want to show an overlay over the content of dropZone, just like in Gmail. That overlay should, of course, disappear when the user isn't dragging a file anymore.

Drop file Gmail

I also want to be able to detect the drop event on the directive to handle the file.

What I've tried so far

I've tried to create a directive that uses this template :

template: '<div>' + 
        '<div id="drop-zone-overlay" class="drop-zone-overlay">' +
            '<h1>Drop files here</h1>' + 
        '</div>' +
        '<ng-transclude></ng-transclude>' + 
      '</div>',

And this CSS:

.drop-zone-overlay {
    box-sizing: border-box;
    display: none;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 99999;
    background: rgba(#60a7dc, .8);
    border: 5px dashed #60a7dc;
}

Please see this Fiddle for full example.


The part I'm struggling with is to make the overlay "float" over all the html content of the directive. Any idea how I could achieve this?



Solution :

I've managed to achieve it with this HTML code for the template:

template: '<div class="drop-zone-container">' + 
        '<div id="drop-zone-overlay" class="drop-zone-overlay">' +
            '<div class="drop-zone-overlay-text">Drop files here</div>' + 
        '</div>' +
        '<ng-transclude></ng-transclude>' + 
      '</div>'

And this CSS:

.drop-zone-container {
  position: relative;
}

.drop-zone-overlay {
    box-sizing: border-box;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 99999;
    background: rgba(#60a7dc, .8);
    border: 5px dashed #60a7dc;
    border-radius: 30px;
}

.drop-zone-overlay::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.drop-zone-overlay-text {
  display: inline-block;
  font-size: 2.8em;
  color: #60a7dc;
}

Please see this Fiddle for full example.


    CSS Howto..

    Customizing ebay store HTML and CSS code (How to?)

    How to detect all events added on a div

    how to add a margin on both sides and center the text in a paragraph?

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to align text next to an icon with CSS?

    CSS: How to clear line-through for an element in a table row?

    How can I align my HTML components with CSS?

    How to Make
    • as structured

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    how to use CSS opacity to let background bleed through in IE8?

    How to manage magento CSS file with over 10,000 lines?

    LESS: How to specify current tag with nesting?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How to format a long
     HTML block suitable for width limited device such as iPhone

    How to place sticky footer div's next to each other when bottom:0 is set dynamically

    How to Properly Add CSS in a MailMessage

    How can I remove this white space from a table?

    How to get inline-blocks to sit side-by-side?

    How to use jQuery to select a class name that's transformed by css-loader?

    how to scroll text area horizontally?

    HTML: How to change the width of input field based on container size

    How to load CSS in Django templates?

    How do I change the css so lowering one class does not lower the other?

    How to keep responsiveness while expanding div background height in CSS?

    In a framework using rewrite rules, how best to integrate CSS and JS?

    How to customize the size of JCoverFlip?

    Is it possible to show webpage in a window from my Chrome extension, only using JS, HTML and CSS?

    HTML/CSS: How to move my navigation bar to the middle?

    How to pause .setInterval() on hover and on .click() of interior content?

    How to share CSS StyleSheet amongst projects?