Jquery -How to do to combined image drag-drop and image zoom?

Question

For my jquery web-application I have a gallery of thumbnails on my page and i would like to be able to:

1. Drag drop any image into a target div
2. When single click on any image the image would expand and show the larger version of the image on the screen.

I have tried to do this my self but it fails as when I drag it it also starts to zoom the image. Any ideas on how to do this?

I have tried with http://andreaslagerkvist.com/jquery/image-zoom/ and the Jquery UI library.

What i have done so far is:

jQuery(document.body).imageZoom();

$(function() {
    $("#draggable").draggable();
    $("#droppable").droppable({
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        }
    });

});

any ideas?

Answer 1

It's strange that the image begins to zoom when you start dragging. I looked at the implementation of the Image Zoom plugin you linked, and it uses the click event (technically, the onclick event), which shouldn't be triggered until the mouse is pressed and released within the bounds of the same element.

I just set up a minimal test case of the jQuery UI Draggable plugin to record every time the click event is registered on a draggable element. Sure enough, if you click the mouse and release without dragging, you get a click event. However, as soon as you begin dragging a draggable, the click event will not trigger (even when you release it).

So anyway, that's why it's weird that you're seeing the Image Zoom plugin zooming the image while its being dragged. Maybe try a different image zooming plugin? There are several linked at the top of the recently decommissioned Thickbox page.