Javascript 将尾部拖到div边框的所有一侧

正在移动的尾巴必须是全方位的，我的意思是它应该可以拖动到div的所有边，现在它只能拖动一侧，必须用鼠标拖动..这样我就可以在我想要的地方用鼠标拖动我的尾巴，应该只越过边界..请给出一些解决方案。 我的代码：

CSS:
.泡泡{
位置：相对位置；
顶部：115px；
高度：120px；
宽度：250px；
背景：#fff；
背景色：红色；
边框：#bbb实心0；
-webkit边界半径：15px；
-moz边界半径：15px；
边界半径：15px；
保证金：0自动；
}
.指针{
内容：“；
位置：绝对位置；
顶部：120px；
左：200px；
显示：块；
宽度：0；
z指数：1；
边框颜色：红色透明；
边框样式：实心；
边框宽度：15px 15px 0；
}
.指针顺序{
内容：“；
位置：绝对位置；
顶部：120px；
左：104px；
显示：块；
宽度：0；
z指数：0；
边框颜色：蓝色透明；
边框样式：实心；
边框宽度：20px 20px 0；
}

---

在这里，您可以看到一个javascript正在运行，它通过拖放来定位您的“尾巴”。

---

此解决方案可以改进很多，但您可以将其作为起点。

您必须使用plz提供的任何解决方案。尾部（箭头）必须向所有方向拖动。现在，它仅适用于一侧，并且必须使用鼠标拖动。

<div class="bubble">
        <div class="pointer" id="position4">
        </div>
        <div class="pointerBorder" style="display: none; left: 74px; top: 120px; border-width: 14px 14px 0px; border-color: rgb(127, 127, 127) transparent;">
        </div>
    </div>

CSS:  

.bubble {
    position: relative;
    top: 115px;
    height: 120px;
    width: 250px;
    background: #fff;
    background-color:red;
    border: #bbb solid 0;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    margin: 0 auto;
}
.pointer {
    content: "";
    position: absolute;
    top: 120px;
    left: 200px;
    display: block;
    width: 0;
    z-index: 1;
    border-color: red transparent;
    border-style: solid;
    border-width: 15px 15px 0;
}
.pointerBorder {
    content: "";
    position: absolute;
    top: 120px;
    left: 104px;
    display: block;
    width: 0;
    z-index: 0;
    border-color: blue transparent;
    border-style: solid;
    border-width: 20px 20px 0;
}

var pointer = {};
$('#pointer').on('mousedown',function(e){
    pointer.moving = true;
    pointer.origin = $(this).position();
    pointer.mouseleft = e.clientX;
    pointer.mousetop = e.clientY;
    console.log(e, pointer);
}).on('mousemove', function(e){
    $this = $(this);
    if (!pointer.moving) {
        return true;
    }
    if ($this.hasClass('left') || $this.hasClass('right')){
        newTop = pointer.origin.top-pointer.mousetop+e.clientY;
        console.log(newTop,$this.parent().height());
        if(newTop < 0){
            $this.removeClass('left right').addClass('top').css({top: ''});
            pointer.moving = false;
        } else if(newTop+$this.outerHeight() > $this.parent().height()){
            $this.removeClass('left right').addClass('bottom').css({top: ''});
            pointer.moving = false;
        } else {
            $this.css({top: newTop});
        }
    } else {
        newLeft = pointer.origin.left-pointer.mouseleft+e.clientX;
        console.log(newLeft);
        if (newLeft < 0){
            $this.removeClass('top bottom').addClass('left').css({left: ''});
        } else if (newLeft+$this.outerWidth() > $this.parent().width()){
            $this.removeClass('top bottom').addClass('right').css({left: ''});
        } else {
            $this.css({left: newLeft});
        }
    }

}).on('mouseup', function(e){
    pointer.moving = false;
});

.pointer {
    position: absolute;
    top: 10%;
    left: 10%;
    display: block;
    width: 0;
    z-index: 1;
    border-style: solid;
    border-color: red transparent;
    border-width: 15px 15px 0;
}
.pointer.bottom{
    border-color: red transparent;
    border-width: 15px 15px 0;
    top: 100%;
}
.pointer.top{
    border-color: red transparent;
    border-width: 0 15px 15px;
    top: -15px;
}
.pointer.left{
    border-color: transparent red;
    border-width: 15px 15px 15px 0;
    left: -15px;
}
.pointer.right{
    border-color: transparent red;
    border-width: 15px 0 15px 15px;
    left: 100%;
}