在某个点停止拖动

Question

我正在为我的 PHP 项目创建封面图片。 我想让它像 Facebook 那样我可以上传尺寸大于所需封面尺寸的封面，然后我想上下左右拖动封面，让用户重新定位并根据自己的情况进行设置。 在这个动作中，我可以拖动照片，但如果图像结束，我想停止拖动。 就像用户将图像向左拖动一样，如果 div 的终点与 div 的终点匹配，则图像应自动停止拖动。 我没有得到合适的句子来描述这一点。 我正在上传一个小提琴，它将显示我想要的我不想显示白色背景（这句话可以解释这个例子）。

演示小提琴： http : //jsfiddle.net/keshu/HC927/1/

$(document).ready(function(){
    $( ".cover_image" ).draggable();
});    

Answer 1

您使用containment选项并检查以将图像保留在其边界内，它允许您：

将拖动限制在指定元素或区域的范围内。

支持多种类型：

Selector ：可拖动元素将包含在选择器找到的第一个元素的边界框中。 如果未找到元素，则不会设置包含。

Element ：可拖动元素将包含在此元素的边界框内。 字符串：可能的值：“父”、“文档”、“窗口”。

Array ：以 [ x1, y1, x2, y2 ] 形式定义边界框的数组。

代码：

$(document).ready(function () {
    $(".cover_image").draggable({
        containment: [
        $(window).width() - $(".cover_image").width(),
        $(window).height() - $(".cover_image").height(),
        0,
        0]
    });
});

演示： http : //jsfiddle.net/8ZBPA/