使用js精确拖放contentplaceholder到contenteditable

Question

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

HTML：放置容器

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

HTML：拖动容器

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

JS：

$(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());
    });
});

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

问题：
第一步完成并在Firefox 32（可能还有其他版本）和IE 11中完美运行。 但是我在Chrome（我的版本是37）和IE 9/10中使用它有几个问题。

铬

1. Chrome将可信内容转换为具有“
   
的字符串
2. Chrome将已删除的内容放入自己的[span]容器 已修复
   
3. 重新整理元素没有“dragend”事件，因此（2）不能使用重新标记的元素

IE

1. 在IE中不起作用＆lt; 9
2. IE 9 + 10：重新划分占位符克隆它而不是将其移动到新位置
   
   

示例
只需查看我的示例： jsFiddle: Sample for precise drag and drop functionality

谢谢大家。