Question

我正在尝试执行以下操作：我在页面上有一个图标，当我拖动它时图标会发生变化。它不得超越收容区域。

我尝试的是这样的：

$("#myElement").draggalble({
    containment: "#myContainer",
    start: function(event, ui) {
        $(this).attr("width", "20");
        $(this).attr("height", "20");
        $(this).attr("src", "newSource.png");
    }
});

图标成功更改，我可以拖动它。唯一的问题是新的图标大小。它比原来小一点。当我将它拖到容器的边界附近时，它太早停止，我无法到达容器边界。具体来说，我无法到达上边界和右边界，但我仍然可以到达底部和左边。我认为这是因为可拖动插件使用旧图标的大小来计算图标限制。

有没有人对如何拖动新图标并到达容器边界有一些建议？

提前致谢：）

Answer 1

为了使其工作，我必须根据较小图片的尺寸创建容器对象。

使用以下选项 - 参数分别是容器div，小图片宽度和小图片高度：

 containment: shrinkSize("#container",20,20),

并且该函数执行以下操作：

function shrinkSize(frameId, smallerWidth, smallerHeight) {
    var frameOffset = $(frameId).offset(),
        frameHeight = $(frameId).height()-smallerWidth,
        frameWidth = $(frameId).width()-smallerHeight;

    return ([frameOffset.left, frameOffset.top, frameOffset.left+frameWidth, frameOffset.top+frameHeight]);
}

Fiddle here

P.S。在小提琴中，被拖动的图像在被删除时会恢复到原始大小。如果这不是预期的行为，只需从stop定义中删除draggable选项（带功能）。

JQuery-UI Draggable：拖动元素大小

1 个答案: