- This topic has 13 replies, 3 voices, and was last updated 1 year ago by Fernando.
-
AuthorPosts
-
April 6, 2023 at 1:11 am #2599080Jin
I’d like to implement a drag-and-drop image system on my website.
I’d like something similar to the widget under the “E-Commerce Site” heading.
Thank you
April 6, 2023 at 1:19 am #2599089Fernando Customer SupportHi 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
April 11, 2023 at 2:11 am #2605232JinHi 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
April 11, 2023 at 6:13 am #2605513DavidStaffCustomer SupportHi 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 thedraggable
attribute to the image block.So you will need to use the HTML Block with your current code.
April 11, 2023 at 7:30 am #2605615JinHi 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
April 11, 2023 at 5:44 pm #2606393Fernando Customer SupportI’m not seeing an element with a scroll on the page you linked. Did you remove it? Or, are you referring to something else?
April 11, 2023 at 5:53 pm #2606401JinHi Fernando nothing was removed. Please view the links.
April 11, 2023 at 7:25 pm #2606443Fernando Customer SupportCan you provide a sketch of how it should look like?
April 12, 2023 at 3:07 am #2606846JinHi 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.
Regarding Widget (2) – HTML, CSS & Javascript used have already been mentioned above.
April 17, 2023 at 7:11 pm #2613017JinHi Fernando, could I follow up on this?
April 18, 2023 at 1:35 am #2613222Fernando Customer SupportI see. Replace these parts in the code –
.gb-container.change-scroll-style
with this::is(.gb-container.change-scroll-style,#dropped-image-container)
April 21, 2023 at 10:18 pm #2617389JinHi Fernando thank you for your assistance!
April 21, 2023 at 10:21 pm #2617390JinMay 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
April 23, 2023 at 7:27 pm #2618842Fernando Customer SupportThis would be out of our scope of support. It would be best to reach out to a developer regarding this.
You’re welcome, Jin!
-
AuthorPosts
- You must be logged in to reply to this topic.