在div边界上拖动语音泡沫的尾部（箭头）

Question

我正在创建一个语音气泡，我想用鼠标在气泡的角落拖动讲话气泡的尖端。它还应根据其所在的一侧自动旋转。 移动它的尾巴必须朝向所有方向我的意思是它应该可以拖动到div的所有侧面，现在它只用于一侧，它必须在鼠标拖动...所以我可以用鼠标拖动我的尾巴哪里我想要bt只应该跨越边界..plz一些给出解决方案。

这是我的演讲泡泡CSS： -

 .SpeechBubble {
                position: absolute;
                background: red;
                border: 1px solid #F2F2F2;
                opacity: 0.9;
                top: 58px;
                left: 18px;
                width: 153px;
                height: 40px;
                min-width: 47px;
                min-height: 38px;
                position: absolute;
            }



.SpeechBubble:after, .SpeechBubble:before {
                top: 100%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
            }



.SpeechBubble:after {
                border-top-color: red;
                border-width: 12px;
                left: 50%;
                margin-left: -14px;
            }
<div class="SpeechBubble"></div>