jQuery UI Draggable Constraint [英] jQuery UI Draggable Constraint

问题描述

我想要做的是在一个较小的div中包含一个大的图像，用户可以在包含div内拖动（足够容易）...类似于http://oneblackbear.com/draggable/index.html ，但我想阻止用户将其拖动到容器边界以外的任何位置。使用上面的示例，用户可以将图像完全拖动到包含的div之外...我想阻止用户将图像拖到父div之外。

what I am trying to do is have an large image contained within a smaller div that the user can drag around within the containing div (easy enough)... similar to http://oneblackbear.com/draggable/index.html but I want to prevent users from dragging it any further then the container boundary. With the above example the user can drag the image completely outside of the containing div... I want to prevent the user from ever dragging the image outside of the parent div at all.

我已经尝试使用jQuery UI draggable但问题是如果我使用约束选项，一旦你拖动图像锁定到右下角，不再是可拖动，因为子元素大于父约束。我不知道如果ui draggable约束只适用于较小的对象，然后父容器。

I have tried using jQuery UI draggable but the problem is if I use the constraint option as soon as you drag the image it locks to the bottom right and is no longer draggable because the child element is larger then the parent constraint. I am not sure if the ui draggable constraint is only intended for smaller objects then the parent container.

有没有人有任何想法如何做？最好使用jQuery Draggable？

Does anyone have any ideas how do do with? preferably with jQuery Draggable?

推荐答案

            var productHeadOffset = jQuery('#productHead').offset();
            var productHeadHeight = jQuery('#productHead').height();
            var productHeadWidth = jQuery('#productHead').width();
            var productHeadImageHeight = jQuery('.productHeadImage').height();

            var right = productHeadOffset.left;
            var bottom = productHeadOffset.top;

            var left = (img.width > productHeadWidth) ? (productHeadWidth + productHeadOffset.left) - img.width : 0;
            var top = (img.height > productHeadImageHeight) ? (productHeadHeight + productHeadOffset.left) - img.height : 0;

            jQuery('.productHeadImage').draggable({ containment: [left, top, right, bottom] });

这篇关于jQuery UI Draggable Constraint的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！