HTML拖拽API实现多表单控件拖拽问题求助

各位开发者好，我正在尝试用HTML原生拖拽API实现表单控件的拖拽功能，想要让文本框、单选按钮、复选框、下拉框和文件上传按钮都支持拖拽，但目前我的代码遇到了几个棘手的问题：

• 文本框可以正常拖拽，但单选按钮和复选框完全拖不动
• 拖拽文本框到目标区域后，它不会停在我放下的精确位置，而是回到了自身默认的布局位置
• 拖拽文本框时，原控件会被移走，我想要的是复制一份控件进行拖拽，原控件保留在侧边栏里

下面是我目前的代码，包含JS、CSS和HTML部分：

JavaScript代码 #

function dragStart(ev) {
    ev.dataTransfer.effectAllowed = 'move';
    ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
    ev.dataTransfer.setDragImage(ev.target, 0, 0);
    return true;
}

function dragEnter(ev) {
    ev.preventDefault();
    return true;
}

function dragOver(ev) {
    return false;
}

function dragDrop(ev) {
    var src = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(src));
    ev.stopPropagation();
    return false;
}

CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');

body {
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}

/* Toggle Styles */
#viewport {
    padding-left: 250px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#content {
    width: 100%;
    position: relative;
    margin-right: 0;
    background: red;
    height: 100vh;
}

/* Sidebar Styles */
#sidebar {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 250px;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: white;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

ul {
    list-style-type: none;
}

#sidebar header {
    background-color: #263238;
    font-size: 20px;
    line-height: 52px;
    text-align: center;
}

#sidebar header a {
    color: #fff;
    display: block;
    text-decoration: none;
}

#sidebar header a:hover {
    color: #fff;
}

#sidebar .nav {
    cursor: pointer;
}

HTML代码 #

<form id="form1" runat="server">
    <div id="viewport">
        <!-- Sidebar -->
        <div id="sidebar">
            <header>
                <a href="#">My App</a>
            </header>
            <ul class="nav">
                <li>
                    <asp:TextBox ID="TextBox2" draggable="true" ondragstart="return dragStart(event)" runat="server"></asp:TextBox>
                </li>
                <li>
                    <asp:RadioButton ID="RadioButton1" draggable="true" ondragstart="return dragStart(event)" runat="server" Text="Radio button" />
                </li>
                <li>
                    <asp:CheckBox ID="CheckBox1" draggable="true" ondragstart="return dragStart(event)" runat="server" Text="Check box" />
                </li>
                <li>
                    <asp:FileUpload ID="FileUpload1" draggable="true" ondragstart="return dragStart(event)" runat="server" />
                </li>
                <li>
                    <asp:TextBox ID="TextBox1" draggable="true" ondragstart="return dragStart(event)" runat="server" TextMode="MultiLine"></asp:TextBox>
                </li>
                <li>
                    <asp:TextBox ID="TextBox3" draggable="true" ondragstart="return dragStart(event)" runat="server" TextMode="Date"></asp:TextBox>
                </li>
            </ul>
        </div>
        <!-- Content -->
        <div id="content" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#"><i class="zmdi zmdi-notifications text-danger"></i></a>
                        </li>
                        <li><a href="#">Test User</a></li>
                    </ul>
                </div>
            </nav>
            <div class="container-fluid">
                <h1>Simple Sidebar</h1>
                <p>Make sure to keep all page content within the <code>#content</code>.</p>
            </div>
        </div>
    </div>
</form>

备注：内容来源于stack exchange，提问作者Ram