Add drag-and-drop functionality for images

Hi Jin,

You would need a third-party plugin for this.

We don't have a recommendation for such a plugin. It may be good to ask for recommendations from our Facebook Group: https://www.facebook.com/groups/1113359788719597

Hi Fernando

I managed to add it without any plugins:

`
<style>
#computer {
width: 356px;
height: 200px;
background-image: url("https://www.digitalsolutions.com.sg/wp-content/uploads/2023/04/computer-laptop-with-transparent-screen-free-png.webp");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}

#image-container {
display: flex;
justify-content: space-between;
margin-top: 30px;
}

.image {
width: 100px;
height: 100px;
cursor: move;
}

#dropped-image-container {
position: absolute;
top: 10px;
left: 32px;
overflow-y: auto;
height: 157px;
}

#dropped-image {
height: auto;
width: 282px;
}
</style>

<script>
let draggedImage = null;

document.addEventListener("dragstart", function (event) {
if (event.target.className === "image") {
draggedImage = event.target;
}
});

document.addEventListener("dragend", function (event) {
draggedImage = null;
});

document.addEventListener("dragenter", function (event) {
if (event.target.id === "computer") {
event.preventDefault();
event.target.style.border = "dashed 2px blue";
}
});

document.addEventListener("dragleave", function (event) {
if (event.target.id === "computer") {
event.preventDefault();
event.target.style.border = "";
}
});

document.addEventListener("dragover", function (event) {
if (event.target.id === "computer") {
event.preventDefault();
}
});

document.addEventListener("drop", function (event) {
if (event.target.id === "computer") {
event.preventDefault();
event.target.style.border = "";
const droppedImage = document.querySelector("#dropped-image");
const droppedImageContainer = document.querySelector(
"#dropped-image-container"
);
droppedImage.src = draggedImage.src;
droppedImageContainer.style.maxHeight = ${event.target.clientHeight}px;
}
});
</script>

<div id="computer">
<div id="dropped-image-container">
<img id="dropped-image" class="change-scroll-style" />
</div>
</div>

<div id="image-container">
<img class="image" src="https://www.digitalsolutions.com.sg/wp-content/uploads/2023/04/kennyrogersroasters.jpeg#main" draggable="true" />
<img class="image" src="sample-image-2.jpg" draggable="true" />
<img class="image" src="sample-image-3.jpg" draggable="true" />
</div>

`

You helped me to change the cursor design here:

https://generatepress.com/forums/topic/i-want-to-add-a-website-portfolio-widget-that-scrolls/

But it uses generatepress's containers. How can I implement the same in HTML / CSS? Or how I can implement the HTML / CSS above in generatepress containers? I've tried using containers and adding in the id and classes in the generatepress block settings but it doesn't seem to work.

The code above only works when placed in a "Custom HTML" widget.

Thank you

Hi there,

there isn't an option in GP to do that.
Even with GenerateBlocks you could add the Container Block and add the ID to its Advanced > HTML Anchor.
But even with GenerateBlocks Pro you would not be able to add the draggable attribute to the image block.

So you will need to use the HTML Block with your current code.

Hi David

Thanks for your message. In that case, how can we implement the design of the cursor, that was done using generateblocks, to the HTML?

Thank you

I'm not seeing an element with a scroll on the page you linked. Did you remove it? Or, are you referring to something else?

Hi Fernando nothing was removed. Please view the links.

Can you provide a sketch of how it should look like?

Hi Fernando

I recorded a 3 minute video to explain what I'm looking for and what I've done. Thank you for your assistance. All links are below as well.

https://youtu.be/8gApDnsNFiY

Regarding Widget (2) - HTML, CSS & Javascript used have already been mentioned above.

Hi Fernando, could I follow up on this?

I see. Replace these parts in the code - .gb-container.change-scroll-style with this:

:is(.gb-container.change-scroll-style,#dropped-image-container)

Hi Fernando thank you for your assistance!

May I ask for your assistance on a minor issue. The drag-and-drop functionality currently only works on the side of the laptop image. When you drag your cursor towards the middle, it doesn't seem to work.

What can I do about this?

Thank you

This would be out of our scope of support. It would be best to reach out to a developer regarding this.

You're welcome, Jin!