4

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

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

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

1 回答 1

5

您使用该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/

于 2013-09-23T13:13:01.303 回答