javascript - div Border のすべての端をドラッグします

Question

移動している尾はすべての方向にある必要があります。つまり、div のすべての側にドラッグできるようにする必要があります。これは片側のみであり、マウス ドラッグで行う必要があります。マウスを使用して尾をドラッグできるようにするためです。国境を越えてのみすべきbtが欲しいところはどこでも..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;
}

このためのjsfiddle