在contenteditable div标签周围拖动图像

Question

所以我有一个contenteditable=true div，其中有div中的图像和文本。我想拖动这个div中的图像来移动图像，同时洗牌并推开文本。我怎样才能做到这一点？我曾尝试使用jquery ui draggable，图像漂浮在文本周围

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代码

任何人都可以帮助我