Javascript 左侧和顶部可拖动%

$（函数（）{
$（'.dragElement'）。可拖动({
遏制：“家长”
}).filter（“.dragElement”）.draggable（“选项”、“轴”）；
});
.one{
宽度：500px；
高度：500px；
边框：2倍实心；
}
1.排水管{
宽度：50px；
高度：50px；
边框：5px纯白；
盒影：rgba（0,0,0,0.5）0px 0px 10px；
}
首先，可以获取父对象的高度和宽度（在调整窗口大小时，还可以使用事件重新计算它们）

然后，使用
拖动
方法获取位置的
左侧
和
顶部
，您可以使用函数使用当前位置和父高度或宽度将其转换为百分比


$（函数（）{
$（'.dragElement'）。可拖动({
遏制：“家长”，
拖动：函数（事件、ui）{
console.log(
“顶部：”+calcPerc（父级高度，用户界面位置，顶部），
“左：”+calcPerc（parentWidth，ui.position.left）
);
}
}).filter（“.dragElement”）.draggable（“选项”、“轴”）；
函数calcPerc（par，子函数）{
返回（100*儿童）/par；
}
});
var parentEl=$（“.1”）；
变量parentHeight，parentWidth；
window.addEventListener（'resize'，recalcParent）；
函数recalcParent（）{
parentHeight=parseInt（parentEl.css（'height'））；
parentWidth=parseInt（parentEl.css（'width'）；
}
recalcParent（）
.one{
宽度：500px；
高度：500px；
边框：2倍实心；
}
1.排水管{
宽度：50px；
高度：50px；
边框：5px纯白；
盒影：rgba（0,0,0,0.5）0px 0px 10px；
}