javascript - 吹き出しの尻尾（矢印）を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>