javascript - 在一点停止拖动

Question

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

演示 fiddle :http://jsfiddle.net/keshu/HC927/1/

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

Answer 1

您使用 containment选项并选中以将图像保留在其范围内，它允许您:

Constrains dragging to within the bounds of the specified element or region.

支持多种类型:

选择器:可拖动元素将包含在选择器找到的第一个元素的边界框内。如果没有找到元素，则不会设置包含。

元素:可拖动元素将包含在该元素的边界框内。 字符串:可能的值:“parent”、“document”、“window”。

数组:以 [ 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/