Drag and Drop Image from Cloudinary Product Gallery

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">

    <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">


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

            drop: function (ev, ui) {
                // console.log(ui);

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

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




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