Question

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

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

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

Answer 1

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

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

支持多种类型：

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

元素：可拖动元素将包含在此元素的边界框中。字符串：可能的值：“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/

停止拖动一点

1 个答案: