JQuery-UI Draggable：拖动的元素大小

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]);
}

在这里摆弄 。

小提琴中的PS，被拖动的图像放下后会恢复为原始大小。 如果这不是预期的行为，则只需从draggable定义中删除stop选项（带有功能）即可。