css-如何制作一个可调整大小和可拖动的框，它是一个带有不透明背景的透明窗口？

我想制作一个可以向左/向右拖动的透明框，也可以用手柄调整大小。框的左右区域应该是不透明的，如下所示：

...即您可以按住框的中间并将其向左移动（显示当前被蓝色阻挡的内容），并且应该能够通过拖动红色手柄来使透明框变大/变小。

这可能与 JQuery UI draggable() 和 resizable() 以及 css 相关吗？

注意：白色框顶部和下方的紫色不必存在 - 也许可以使用 2 个可调整大小的紫色 div 和一个可拖动的透明 div 来完成？