Adding a drag-drop functionality with iframe on Wix

Ask the community
,
1

Hello,

I am trying to add a drag and drop functionality on my Wix website through the customer Embeds → Embed a Widget using HMTL code.

I am not very familiar with coding, so im not sure if this functionality is possible. What I am trying to do is add an image in the image uploads and read the image from the hmtl code.

I found this code online for a drag/drop functionality, however I am not sure where the code is reading the image from. I added an image through the image uploads in Wix (with ID #image8) and then I changed the HTML code to read this image ID (bottom part of the code), but it doesn’t work.

1030×759 12.5 KB

Could anyone help?

Thank you in advance!

2

Well a big problem I see is that “image8” is not the src of the image, you will need to get the src from the media manager or an external url:
https://support.wix.com/en/article/wix-editor-retrieving-the-url-of-an-image
https://www.wix.com/velo/reference/$w/image/src
Also since this is not specifically Velo-related you might get better help on Stack Overflow or other such sites.

3

Thank you very much for this! This is very useful!

4

FYI: I managed to find some code online which made the drag-drop functionality work. The image URL can be found using the link posted above ( https://support.wix.com/en/article/wix-editor-retrieving-the-url-of-an-image
https://www.wix.com/velo/reference/$w/image/src ) and posted in the src option below.

Regards

<!DOCTYPE HTML>
<html>
<head>
<script>
	var dragValue;
		
	function move(id){
		var element = document.getElementById("theDiv");
		element.style.position = "absolute";
		element.onmousedown = function(){
			dragValue = element;
		}
	}
	document.onmouseup = function(e){
		dragValue = null;
	}
	document.onmousemove = function(e){
		var x = e.pageX;
		var y = e.pageY;
			
		dragValue.style.left = x + "px";
		dragValue.style.top = y + "px";
		
	}

</script>
</head>
<body onload="move('theDiv')">

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="theDiv" src="https://static.wixstatic.com/media/460bd2_a58a4e3400d14ec48ff9c4720cce5797~mv2.png" 
draggable="true" ondragstart="drag(event)" width="156" height="69">

</body>
</html>