javascript - 在 div 边框上拖动语音气泡的尾部（箭头）

Question

我正在创建一个对话泡泡，我想用鼠标将对话泡泡的尖端拖到泡泡的一角。它还应该根据它在哪一侧自动旋转。移动它的尾巴必须在所有方向上我想在哪里只需要越过边界的bt ..请一些人提供解决方案。

这是我的语音气泡 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>