Drag and Drop Image from Cloudinary Product Gallery

JavaScript
#1

I have the task.
I loaded images from Cloudinary product image and I want to drag any of the images and drop them in a box.
But my code is not working. Any help with this?

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>droppable demo</title>

    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript">
    </script>
</head>

<body>


    <div id="my-gallery">Drag any one</div>
    <div id="div2">Drop Here</div>
    <script>
        var myGallery = cloudinary.galleryWidget({
            container: "#my-gallery",
            cloudName: "demo",
            mediaAssets: [{ tag: "shoes_product_gallery_demo" }],
        });
        myGallery.render();


        myGallery.draggable();
        $("#div1").droppable({
            drop: function (ev, ui) {
                // console.log(ui);
                ev.preventDefault();

                var data = ui.draggable.attr("id");

                ev.target.appendChild(document.getElementById(data));
                $("#" + data).css({ top: ui.offset.top, left: ui.offset.left, position: 'absolute' });
            }
        });


    </script>

</body>

</html>
#2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.