Javascript 围绕contenteditable div标记拖动图像

因此，我有一个contenteditable=true div，其中有图像和文本在这个div中。我想拖动这个div中的图像来移动图像，同时洗牌并将文本推开。我该怎么做？我尝试了jQueryUIDragable，图像在文本周围浮动

function drag_image() {
    $("#drag").draggable({
        //opacity: 0.7, helper: "clone",
        containment: "#background",
        stop: function(ev, ui) {
            pos = ui.position;
            $("#drag").css({
                'top':pos.top,
                'left':pos.left,
                'position':'absolute'
            });
            console.log("position top "+pos.top+" position left"+pos.left);
        }
    });
}

这是我用于拖动的jquery代码

<div id="background"contenteditable="true" style="border:solid black 1px;height:500px;overflow:auto;">
    <img OnClick="drag_image()" id="drag" src="http://img.wikinut.com/img/gycf69_-6rv_5fol/jpeg/0/Best-Friends-Img-Src:Image:-FreeDigitalPhotos.net.jpeg" width="40px" height="40px" style="max-height:200px;">
    Penang is a state in Malaysia and the name of its constituent island, located on the northwest coast of Peninsular Malaysia by the Strait of Malacca.
</div>

这是我的HTML代码

谁能帮帮我吗