Question

对于我的jquery网络应用程序，我的页面上有一个缩略图库，我希望能够：

将任何图片拖放到目标div
单击任何图像时，图像会展开并在屏幕上显示较大的图像版本。

我试图自己做这件事，但它失败了，因为当我拖动它时它也开始缩放图像。关于如何做到这一点的任何想法？

我尝试过使用http://andreaslagerkvist.com/jquery/image-zoom/和Jquery UI库。

到目前为止，我所做的是：

jQuery(document.body).imageZoom();

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

});

任何想法？

Answer 1

当你开始拖动时，图像开始变焦是很奇怪的。我查看了你链接的Image Zoom插件的实现，它使用click事件（技术上来说，onclick事件），直到鼠标按下并在同一范围内释放时才会触发元件。

我只是设置了jQuery UI Draggable插件的最小测试用例，以便每次在可拖动元素上注册click事件时进行记录。果然，如果单击鼠标并在不拖动的情况下释放，则会出现单击事件。但是，只要您开始拖动可拖动的，点击事件就会不触发（即使您将其释放）。

所以无论如何，这就是为什么你看到图像缩放插件在拖动图像时缩放图像的原因很奇怪。也许尝试不同的图像缩放插件？最近退役的Thickbox页面顶部有几个链接。

Jquery - 如何组合图像拖放和图像缩放？

1 个答案: