Fix loading on drag drop

[DavinciDreams]

Fix NFT from Metamask #2587 webaverse/app#2589
Fix GLB loading on drag drop webaverse/app#2588
Fix VRM loading on drag drop webaverse/app#2587
Fix Sketchfab loading on drag drop webaverse#5

Drag & Drop Doesn't works for both vrms and glbs #62
Drag and dropped assets do not get teleported along with avatar #2793
app: drag & dropped VRMs go invisible after scn switching #2690
scene switching is bugged with non-default character #2940
Drag n' drop pet bugs #2606
App does not load all assets sometimes and has to be refreshed #2114
APP: NFT position moving does not update in multiplayer #602

id	title
drag-n-drop	Drag & Drop

Drag & Drop Module

The Drag & Drop module exposes the API that can make any element of the user iterface a draggable or a drop zone.

import {Drag, Drop, dropEffect} = require('./components/drag.js');

Usage

Drag

<Drag dataItem={any} dropEffect={keyof dropEffect} dragImage={String}>
	<!-- UI Elements Come Here-->
</Drag>

Inputs

• dataItem: {integer|string|object|array|boolean} [Required]
• dragImage: {URL | URI }
• dropEffect: dropEffectEnum

---

Drop

<Drop onItemDropped={function} dropEffect={keyof dropEffect}>
	<!-- UI Elements Come Here-->
</Drop>

Inputs

• onItemDropped: {function} [Required]
• dropEffect: dropEffectEnum

---

Output

onItemDropped call back will be called with following paramters passed

• event: {dragOver}
• dataItem: {Payload passed by the Drag Event}

---

Architecture

Flow Diagram

---

Location

Webaverse App
└───src
   └───components
         └─── drag.js

---

Exports

Drag

const Draggable = props => {
  const [isDragging, setIsDragging] = React.useState(false);
  const image = React.useRef(null);
React.useEffect(() => {

image.current = null;

if (props.dragImage) {

image.current = new Image();

image.current.src = props.dragImage;

}

}, [props.dragImage]);
const startDrag = ev => {

setIsDragging(true);

ev.dataTransfer.setData('drag-item', props.dataItem);

ev.dataTransfer.effectAllowed = props.dropEffect;

if (image.current) {

ev.dataTransfer.setDragImage(image.current, 0, 0);

}

};
const dragEnd = () => setIsDragging(false);
return (

<div style={isDragging ? draggingStyle : {}} draggable onDragStart={startDrag} onDragEnd={dragEnd}>

{props.children}

</div>

);

};

• Drag is a React Component and it uses the isDragging state to make use of the HTML5 Drag & Drag Over event.
• It also uses the React.useEffect hook to show the image while dragging if it's set.
• It uses draggable handle in react to make any element draggable.
• It uses onDragStart & onDragEnd functions to alter the data in the Drag Event.

---

Drop

const DropTarget = props => {

const [isOver, setIsOver] = React.useState(false);

const dragOver = ev => {

ev.preventDefault();

ev.dataTransfer.dropEffect = props.dropEffect;

};
const drop = ev => {

const droppedItem = ev.dataTransfer.getData('drag-item');

if (droppedItem) {

props.onItemDropped(ev, droppedItem);

}

setIsOver(false);

};
const dragEnter = ev => {

ev.dataTransfer.dropEffect = props.dropEffect;

setIsOver(true);

};
const dragLeave = () => setIsOver(false);
return (

<div

onDragOver={dragOver}

onDrop={drop}

onDragEnter={dragEnter}

onDragLeave={dragLeave}

>

{props.children}

</div>

);

};

• Drop is a React Component and it uses the isOver state to manage the drop event on the target.
• It uses the onDragOver, onDragEnter, onDragLeave & onDrop to manage the state of the drop event on it.
• Drop works by preventing the default events of OnDragEnter & onDragOver.
• It uses onDrop event and call the onItemDropped passed in as a prop item wheneven the onDrop event is fired.
• It passes the instance of event & dataItems to the function from where we can use event.preventDefault to cancel the buble effect of the event.

---

dropEffect

More Information

id title drag-n-drop Drag & Drop Drag & Drop Module The Drag & Drop module exposes the API that can make any element of the user iterface a draggable or a drop zone.

import {Drag, Drop, dropEffect} = require('./components/drag.js');
Usage
Drag
<Drag dataItem={any} dropEffect={keyof dropEffect} dragImage={String}>


Inputs
dataItem: {integer|string|object|array|boolean} [Required]
dragImage: {URL | URI }
dropEffect: dropEffectEnum
Drop
<Drop onItemDropped={function} dropEffect={keyof dropEffect}>


Inputs
onItemDropped: {function} [Required]
dropEffect: dropEffectEnum
Output
onItemDropped call back will be called with following paramters passed

event: {dragOver}
dataItem: {Payload passed by the Drag Event}
Architecture
Flow Diagram
Flow Diagram

Location
Webaverse App
└───src
└───components
└─── drag.js
Exports
Drag
const Draggable = props => {
const [isDragging, setIsDragging] = React.useState(false);
const image = React.useRef(null);

React.useEffect(() => {
image.current = null;
if (props.dragImage) {
image.current = new Image();
image.current.src = props.dragImage;
}
}, [props.dragImage]);

const startDrag = ev => {
setIsDragging(true);
ev.dataTransfer.setData('drag-item', props.dataItem);
ev.dataTransfer.effectAllowed = props.dropEffect;
if (image.current) {
ev.dataTransfer.setDragImage(image.current, 0, 0);
}
};

const dragEnd = () => setIsDragging(false);

return (
<div style={isDragging ? draggingStyle : {}} draggable onDragStart={startDrag} onDragEnd={dragEnd}>
{props.children}

);
};
Drag is a React Component and it uses the isDragging state to make use of the HTML5 Drag & Drag Over event.
It also uses the React.useEffect hook to show the image while dragging if it's set.
It uses draggable handle in react to make any element draggable.
It uses onDragStart & onDragEnd functions to alter the data in the Drag Event.
Drop
const DropTarget = props => {
const [isOver, setIsOver] = React.useState(false);

const dragOver = ev => {
ev.preventDefault();
ev.dataTransfer.dropEffect = props.dropEffect;
};

const drop = ev => {
const droppedItem = ev.dataTransfer.getData('drag-item');
if (droppedItem) {
props.onItemDropped(ev, droppedItem);
}
setIsOver(false);
};

const dragEnter = ev => {
ev.dataTransfer.dropEffect = props.dropEffect;
setIsOver(true);
};

const dragLeave = () => setIsOver(false);

return (

{props.children}

);
};
Drop is a React Component and it uses the isOver state to manage the drop event on the target.
It uses the onDragOver, onDragEnter, onDragLeave & onDrop to manage the state of the drop event on it.
Drop works by preventing the default events of OnDragEnter & onDragOver.
It uses onDrop event and call the onItemDropped passed in as a prop item wheneven the onDrop event is fired.
It passes the instance of event & dataItems to the function from where we can use event.preventDefault to cancel the buble effect of the event.
dropEffect
More Information