Jquery 用鼠标移动/旋转语音气泡的尾部

我正在创建一个语音泡泡，我想用鼠标将语音泡泡的尖端拖到泡泡的各个角落。它还应根据其所在的一侧自动旋转

我的代码：

<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;
}

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；
}

---

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

如果你想要的是移动的话将箭头指向正方形顶部，然后需要将指针样式更改为：

.pointer {
content: "";
position: absolute;
top: -10px;
left: 200px;
display: block;
width: 0;
z-index: 1;
border-color: red transparent;
border-style: solid;
border-width: 0 15px 15px;
}

---

如果你想让尾巴沿着木板移动，那么你可以这样做：

var direction = "right";
var movementInterval = 1;

setInterval(function() {
    var left = $('.pointer').css('left');
    var leftNumber = parseInt(left, 10);

    if(direction == "right"){
        if(leftNumber > 200){
            direction = "left";
        }
        leftNumber += movementInterval;
    }else{
        if(leftNumber < 15){
            direction = "right";
        }
        leftNumber -= movementInterval;
    }

    $('.pointer').css('left', leftNumber + 'px');
}, 10);

var direction=“right”；
var movementInterval=1；
setInterval（函数（）{
var left=$（'.pointer'）.css（'left'）；
var leftNumber=parseInt（左，10）；
如果（方向=“右”）{
如果（leftNumber>200）{
方向=“左”；
}
leftNumber+=移动间隔；
}否则{
如果（左数<15）{
direction=“right”；
}
leftNumber-=移动间隔；
}
$（'.pointer'）.css（'left'，leftNumber+'px'）；
}, 10);

---

看看这个，看看它在起作用

尾巴在正方形的div上。你到底想做什么？你想要js代码吗？你想把它移到哪里？请更具体一点。正如我上面提到的，它必须用鼠标拖过div的边界。它必须在边界上，我才能拖过边界。你明白吗。请给出解决方案很棒！！！Thanx的意思是…但是移动的尾巴必须是全方位的，我的意思是它应该可以拖到div的所有边，现在它只能拖一个边，而且必须用鼠标拖动…这样我就可以用鼠标拖动我的尾巴，在我想要的地方，bt应该只能越过边界…“请给出解决方案”：对不起，StackOverflow不是这样工作的。你可以考虑阅读这个：根据我的例子来尝试一下，然后再问你是否有具体的问题。这可能也有帮助：拖动DIV边界的所有边（指针）。请给出解决方案。