Angular issue with Drag and Drop - javascript

I've a simple list made of mat-card. I would like to highlight the mat-card when dragging a file over and do something on the file drop, but I have two main issues:
Sometimes, when dragging too fast, the status of the mat-card is not correctly updated. so in some cases I have multiple cards highligthed.
The e.preventDefault() on drop event does nothing. The file is open in the browser, which is not the expected behaviour.
I tried so many things, even manually add/remove event listeners, but nothing worked. Hope someone will help :)
Here you can find a demo made in stackblitz so it can be easier to debug:
https://stackblitz.com/edit/angular-material-with-angular-v5-d2uted
Update:
Using Angular v5 and Angular Material 2

After some poking around, the dragover event needs to be prevented as well as the drop event in order to stop the browser from opening the file. To fix the class being applied multiple times, I fixed this by using ngClass instead of the ngIf and it seems to work more consistently. Check out this stackblitz for a demo.

For the first issue, this is because of Angular lifecycle that isn't fast enough. Either you stop using Angular's context to update your elements, or you find another way of notifying the user that he is above the application.
For the second issue, add an host listener to the window:dragover event to prevent the default :
#HostListener('window:dragover', ['$event'])
windowDragOver(event: Event) {
event.preventDefault();
}
Stackblitz

Related

How to ignore right click on Easel JS

I am working on Easel JS and came across one issue.
If I am adding Events to one easelJs element then how can I ignore the right-click and only listen to left-click?
Click should work on a primary key but it is also working for other keys also.
I have come across one scenario where pressUp of left-clicking is getting missed and that is creating an issue.
steps are as follows:
left mouseDown on the object.
right mouseDown on the same object.
right pressUp on the object.
If we follow this order, left pressUp is getting missed it is not getting fired nor it is present after that point. It's like it totally vanishes as if it never existed.
Can anyone please help me with this? Thank you in advance!!
I am kind confused with your question, but I think a easy way to ignore the right click event is to use event.preventDefault for contextmenu.
The preventDefault() method of the Event interface tells the user
agent that if the event does not get explicitly handled, its default
action should not be taken as it normally would be.
For example (you may not able to show the right click menu in the example):
document.addEventListener('contextmenu', function() {
event.preventDefault();
return false;
})

Two drag and drop libraries having conflict

We are both using react-sortable-hoc and react-dropzone and they work fine if on separate pages. However, react-sortable-hoc do not work properly when react-dropzone is used on the same page because I noticed that react-dropzone also gets triggered by the drag event from the react-sortable-hoc. (E.g. I can no longer drag an item in between other items.)
I tried adding e.preventDefault() and e.stopPropagation() on react-sortable-hoc's onSortStart event but react-dropzone is still being triggered.
What other approach can we try to make them play nice together / not allow the other to be affected?
If the problem is caused when dropping (not when starting the drag): react-dropzone takes over the whole window regarding file drops, to prevent the browser from navigating away from the current page to the dropped file if the user misses the drop zone (a common annoyance).
More specifically, dragover and drop handlers are registered on the document:
document.addEventListener('dragover', onDocumentDragOver, false)
document.addEventListener('drop', onDocumentDrop, false)
If that's the problem you should be able to circumvent this by setting the react-dropzone option preventDropOnDocument to false (default is true).
Alternatively, you could try the react-dropzone option noDragEventsBubbling, but I think this would handle the opposite problem (triggering events on react-sortable-hoc when dropping files)
I created a Sandbox and tried to reproduce your code which is using both react-dropzone and react-sortable-hoc at the same component. And it works well and has no problem.
https://codesandbox.io/s/nifty-ganguly-khswc?file=/src/App.js:1156-1485

Material Design Lite + React - Issues with Tooltips

Recently, I have been integrating Material Design Lite into my React web application. For the most part, everything has worked out just fine, but currently I am having some issues with React's event handling, which doesn't seem to play nice with some MDL components.
In particular, I have a DOM element with an onClick handler, which works perfectly fine, until a MDL Tooltip is added, which causes the onClick to no longer fire. I've tried pretty much every variation possible (put the tooltip somewhere else in the DOM, attach the onClick handler to a container div which has the tooltip as a child, etc), and I just can't seem to get it to work.
Here's a JSBin that demonstrates the issue (I've also included an example that uses jQuery to bind a click handler to the element after the component mounts, which actually DOES work):
http://jsbin.com/sewimi/3/edit?js,output
I have some theories as to why this isn't working, but I don't know enough about either React or MDL to verify any of them.
I believe it has something to do with the way React handles events, and for some reason, MDL seems to be clashing with it. From the documentation:
React doesn't actually attach event handlers to the nodes themselves.
When React starts up, it starts listening for all events at the top
level using a single event listener. When a component is mounted or
unmounted, the event handlers are simply added or removed from an
internal mapping. When an event occurs, React knows how to dispatch it
using this mapping. When there are no event handlers left in the
mapping, React's event handlers are simple no-ops
This makes it seem like MDL might be messing with React's internal mapping of events, which causes my click on the element to become a no-op. But again, this is just a complete guess.
Does anyone have any ideas about this? I would prefer not to have to manually bind an event listener in componentDidMount for each of my components that use MDL Tooltips (like I did in the example JSBin I provided), but that's the solution I'm going with for now.
Also, since I was not sure if this was an MDL specific bug, I opted to post this question here instead of on their issues page. If anyone thinks I should post it there as well, let me know, and I can do that.
Thanks!
I faced this same issue too. I was trying to capture event clicks on a mdl-menu__item. And you are right in that React's synthetic event system is clashing.
What happens is that if an event happens inside your React component, your component will be the last to hear of the event. My work around was circumvent reacts event and use a react component which helps to attach native events react-native-listener.
<NativeListener onClickCapture={this.onListClick}>
<li className='mdl-menu__item' >
{...}
</li>
</NativeListener>
// This will be called by the native event system not react,
// this is in order to catch mdl-menu events and stop the menu from closing
// allowing multiple fields to be clicked
onListClick(field, event) {
event.stopImmediatePropagation();
// console.log('click');
}
My solution was for the mdl-menu but I'm sure it applies to the tooltip too.
A little late but
componentHandler.upgradeAllRegistered();
gets dynamically loaded elements working.
Note: that if you move the target element via CSS position the tooltip does not render to the new position automagically, you will need to id it and position it too.

HTML 5 drag and drop in firefox not working as expected

I am implementing a file processor in JS and HTML 5 and it is working as expected in Chome, but not in Firefox.
Here is the jsfiddle: http://jsfiddle.net/vapocalypse/G9QbX/
In Firefox, the drop event is forwarded to the browser, which opens the file, not being processed by my script. It behaves as if I dropped something over an empty tab.
What am I doing wrong? I have tried changing from jQuery to native DOM using getElementById and overriding the ondrop method, but same results...
Thanks,
Apoc
As far as I can tell, your basic problem is that you're not cancelling the dragover event on the the element you're trying to capture the drop event on. The drop event is ignored in this case. Here is the code I added:
$('#topDiv').bind("dragenter dragover", function(e) {
e.preventDefault();
return false;
});
I also removed the $(document).ready form your code and just set the jsFiddle to run all the JS onDomReady instead, but I don't think that made much difference. Here's the example.
Well, see http://jsfiddle.net/G9QbX/75/. It's based on your's example. Don't know why, but dragover event is not boud via $.bind or addEventListener functions in FF14. The example is very dirty, but it works. I will write if i find a better solution.

Jquery plugin menu - bind or live

I'm learning how to do my own Jquery plugin and I'm starting with some basic stuff.
You can see my fiddle here: http://jsfiddle.net/denislexic/8YBM6/8/
This needs to be binded, ie, some of the time the elements will be AJAX loaded, so the plugin still needs to work. (in the fiddle I added a button that copies the content, so I could test it out, but no luck...)
I usually just do live or on. I'm trying to learn and understand.
Thanks
Here's an updated fiddle: http://jsfiddle.net/aR8RQ/1/
Changes I made include:
I'm using event delegation for the 'avatars' element(s). Previously the events were binded using .each() which would have only binded the events on the initial call for the plugin.
I'm using .data() to store the state of the menu (whether it's open or close) and added some event bindings on the document to handle closing the menu.
I added comments to hopefully help you out! I think this does everything you originally asked for (for instance: hiding the menu if you click on anything other than that). There's still some work you can do (for instance, when you "duplicate" you can handle the "close" method for your menus more gracefully!)
Hopefully this helps! :)

Categories

Resources