StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Angular doesn't know when event handlers you have registered are triggered, so you need to notify Angular that you've changed scope variables. You do that with the <a href="http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply" rel="nofollow"><code>$apply</code></a> function.</p> <pre><code>$scope.$apply(function () { $scope.divClass = 'on-drag-enter'; }); </code></pre> <p><s>When it comes to the drop handler you're correct--the statements after <code>var droppedFiles = e.dataTransfer.files;</code> are never run because of the runtime error that statement results in.</p> <p><code>e</code> is a jQuery event, whereas <code>dataTransfer</code> is a property on the actual DOM event. To fix the problem you need to access the original event through the <code>originalEvent</code> property.</p> <pre><code>var droppedFiles = e.originalEvent.dataTransfer.files; </code></pre> <p></s></p> <p><strong>Update</strong></p> <p><code>e.originalEvent</code> is only needed if you have included jQuery before angular, but since you haven't done that in your plnkr, that solution was invalid, I apologize for that.</p> <p>It seems like you need to opt in for drop support by <a href="https://developer.mozilla.org/en-US/docs/Web/Events/dragover" rel="nofollow"><code>preventDefault</code> of the dragover event</a> (Perhaps this can be done in other events as well--haven't tested.)</p> <pre><code>elem.bind('dragover', function (e) { e.stopPropagation(); e.preventDefault(); }); </code></pre> <p><a href="http://plnkr.co/edit/Uidw0XvRSRzzQrxMgwy5?p=preview" rel="nofollow">Updated plnkr</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload