JavaScript Drag and Drop Effects
JavaScript Drag and Drop Effects

JavaScript Drag and Drop Effects

HTML code to have a draggable element, here I use a span and set its draggable property to true.

<div class="Row">
	<span id="xxx" draggable="true" style="margin-left: 20px;"></span>
</div>

This is the JavaScript code to handle the drag and drop events.

document.addEventListener( 'dragstart', function ( event ) {

	const rawName = event.target.id;
	const thumbnailName = rawName + '_128x128.png';
	event.dataTransfer.dropEffect = 'copy';
	var img = new Image();
	img.src = thumbnailName;
	event.dataTransfer.setDragImage(img, 64, 64);
	event.dataTransfer.setData("rawName", rawName);

} );
document.addEventListener( 'drop', function ( event ) {

	event.preventDefault();

	const rawName = event.dataTransfer.getData("rawName");
	const modelToLoad = rawName + '.glb';
	editor.loader.loadFile(modelToLoad);

} );