具有jquery ui可拖动的无限可拖动元素

我正在尝试创建一个元素，该元素在拖动时会增长和收缩。 这是通过向上向右拖动来实现的。只是拖动到左侧和底部不起作用

有关更多详细信息，请参阅代码段

var move={
拖动：函数（）{
main=$（'main'）；
可拖动的({
拖动：函数（事件、ui）{
$（this.css）({
“padding right”：Math.abs（ui.position.left），
“填充底部”：Math.abs（ui.position.top），
});
},
卷轴：错，
});
}
}
move.drag（）
正文{
保证金：0；
溢出：隐藏
}
主要{
宽度：100vw；
高度：100vh；
背景：url（'https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg');
}
下面的解决方案稍微打断了动画，但却造成了一个有争议的背景

你的问题是，顶部和左侧是在拖动完成后编辑的，所以我尝试使用超时功能编辑它们

请参阅下面的代码片段：


设newtop=newleft=0；
让dataMain；
变量移动={
拖动：函数（）{
main=$（'main'）；
可拖动的({
拖动：函数（事件、ui）{
newtop=Math.abs（ui.position.top）；
newleft=Math.abs（ui.position.left）；
$（this.css）({
“padding right”：newleft，
“填充底部”：newtop，
});
setTimeout（函数（）{
main.css({
“顶部”：-newtop，
“左”：-newleft
})
},1);
},
卷轴：错，
});
}
}
move.drag（）
正文{
保证金：0；
溢出：隐藏
}
主要{
宽度：100vw；
高度：100vh；
背景：url（'https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg');
背景重复：重复；
}
经过进一步研究，我发现我也可以用背景位置来做这件事。所以我现在用这个作为解决方案。通过拖动绿色div


var move={
拖动：函数（）{
main=$（'main'）；
$（'div'）。可拖动({
拖动：函数（事件、ui）{
main.css({
“背景位置”：ui.position.left+“px”+ui.position.top+“px”，
});
},
卷轴：错，
});
}
}
move.drag（）
正文{
保证金：0；
溢出：隐藏
}
主要{
宽度：100vw；
高度：100vh；
背景：url（'https://previews.123rf.com/images/kitch/kitch1302/kitch130200221/18077895-an-illustative-grid-graph-pattern-or-background.jpg');
}
div{
宽度：59px；
高度：59px；
背景：绿色；
利润率：124px；
位置：绝对位置；
}