停止拖动一点

Question

我正在为我的php项目创建一个封面图像.我想让它像Facebook一样我可以上传大小超过所需封面尺寸的封面然后我想将封面上下左右拖动让用户重新定位并根据他自己设置.在这个动作我能够拖动照片,但我想停止拖动图像结束.就像用户将图像拖动到左侧一样,如果div的终点与div的结束点匹配,则图像应自动停止拖动.我没有得到适当的判决来形容这一点.我正在上传一个小提琴,它将显示我想要的东西,我不想显示白色背景(可能这句话解释了这个例子)

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

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

Answer 1

您使用该containment选项并检查以保留其边界内的图像,它允许您:

约束拖动到指定元素或区域的范围内.

支持多种类型:

选择器:可拖动元素将包含在选择器找到的第一个元素的边界框中.如果未找到任何元素,则不会设置包含.

元素:可拖动元素将包含在此元素的边界框中.字符串:可能的值:"parent","document","window".

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/