Brave Browser - Developer Feature - Implement dataTransfer native events properly so the function getData() works properly

Contributing Developers
, ,
1

Hello. I’m a web developer and I have been seeing a problem that seems to persist in every browser save for Firefox. Normally I would say that Firefox is just a special boy, but in this case it seems to be a feature other browsers have tried implementing as well but to no success.

I have been working in the VueJS framework (javascript / html / scss). Recently, I have been implementing a native drag-and-drop feature from scratch inside of my application. When I capture native dragstart, dragend, dragenter, etc events I see there is a dataTransfer object sitting there. I have read some documentation about dataTransfer telling me that this is how data is managed across dragging and dropping data between events.

The flow for transferring data appears to be the following:

  1. Capture the @dragstart event into your onDragStart() function.
  2. Set your data (or other things about the drag event) on the dataTransfer property of your event.
    For example,
    SomeComponent.vue

 methods: {
   onDragStart(e) {
     const { id } = e.target;

     e.dataTransfer.dropEffect = 'copy';
     e.dataTransfer.setData('userId', id);
   },
   onDragEnd(e) {
     e.dataTransfer.clearData();
   },
 },
  3. You can now capture the data from your drop event (or dragenter event, in my case) even in another component.
    For example,
    SomeOtherComponent.vue

 methods: {
   onDragEnter(e) {
     const userId = e.dataTransfer.getData('userId');

     this.tempUser = this.users.find((u) => u.id === userId);
   },
   onDrop(e) {
     const userId = e.dataTransfer.getData('userId');
     const user = this.users.find((u) => u.id === userId)

     this.users.push(user);
   },
 },

I have tried implementing this feature and the getData function only returns my value in the Firefox browser. I’m not certain whether setData is actually receiving and storing the data field I have passed into it in the Chrome/Brave browsers. It appears, according to my experience and these StackOverflow responses, that HTML5 in Chrome/Brave has a half-working implementation of this feature:

Help a dev out? Is there a reason why the implementation isn’t supported? Is this something Mozilla came up with on their own? Should I be looking for this feature down the road, or should I stick with my VueX/Redux global variable solution to this problem?

2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.