停止在某个点拖动

Stop dragging at a point

本文关键字：拖动      更新时间：2023-09-26

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

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

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

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

约束拖动到指定元素的边界内或 地区。

支持多种类型：

选择器

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

元素

：可拖动元素将包含到此元素的边界框中。字符串：可能的值："父"、"文档"、"窗口"。

数组

：定义边界框的数组，格式为 [ 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/

相关文章：