Javascript 使用js将contentplaceholder精确拖放到contenteditable中

设置：
-contenteditable div（作为textarea）包含文本
-包含可拖动元素（称为占位符）的拖动容器

HTML:放置容器

<div id="contentBox" class="editableBox" contenteditable="true"></div>

<div id="placeholderBox">
    <span class="btnEditable" contenteditable="false">test1</span>
    <span class="btnEditable" contenteditable="false">test2</span>
</div>

目标：
所需的功能是拖动任何占位符并将其放到contenteditable的精确文本位置。在第二步中，我想使用一个附加函数来用一些动态内容替换这些删除的占位符

问题：
第一步已经完成，并且在Firefox32（也许其他版本也可以）和IE11中运行良好。 但是我在Chrome（我的版本是37）和IE 9/10中遇到了一些问题

铬

Chrome将内容可编辑内容转换为具有“

Chrome将丢弃的内容放入自己的[span]容器中，该容器已修复

重绘元素不再有“dragend”事件，因此（2）不适用于重绘元素

即

在IE<9中不起作用

IE 9+10：重绘占位符克隆它，而不是将其移动到新位置

样本
看看我的示例：

谢谢大家

$(function(){
    $("body").on("mousedown", ".btnEditable", function(){
        $(this).selectText();
    }).on("dragend", ".btnEditable", function(e){
        $(".editableBox")
            .find("span:not(.btnEditable)").addClass("btnEditable").attr("contenteditable",false)
            .removeAttr("style").html($(e.currentTarget).html());
    });
});