0

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

我尝试过的是这样的：

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

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

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

提前致谢 ：）

4

1 回答 1

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 在小提琴中，被拖动的图像在拖放时会恢复为原始大小。如果这不是预期的行为，只需从定义中删除stop选项（带函数） 。draggable

于 2012-12-18T14:58:43.987 回答