鼠标拖拽

我想要的效果是这样的，鼠标拖拽当前标签里的值，拖到另一个地方之后（相当于复制）改变值；但是原先的值还是不改变的；求大神帮实现；
就像图片中显示的那样，我拖动【1】处的文字，在【2】处显示文本框的标签，求大神！！！

解决方案 »

  1.   

    是的，同一个浏览器的同一个界面
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="js/jquery-1.11.3.min.js"></script>
    <meta charset="utf-8" />
        <script>
            $(function () {
                var i = 0;
                            $("#SelectBox").on(
                    "mousedown", ".SelectText", function (e) {
                        i++;
                        var thisID = $(this);
                        var inputID = "<input id='input_" + i + "'>";
                        $("#SelectBox").append(inputID);
                        inputID = $("#input_" + i + "");
                        inputID.css({ "position": "absolute" });
                        var of = inputID.offset();
                        var px = e.pageX - of.left, py = e.pageY - of.top;
                        $(document).on({
                            "mousemove": function (e) {
                                inputID.offset({ top: e.pageY - py, left: e.pageX - px });
                            },
                            "mouseup": function () {
                                $(this).off("mousemove");
                            }
                        })
                    }
                );
                
            });    </script>
    </head>
    <body>
        <div id="SelectBox"><span class="SelectText" >文本框</span></div>
    </body>
    </html>
      

  2.   

    是的，同一个浏览器的同一个界面
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="js/jquery-1.11.3.min.js"></script>
    <meta charset="utf-8" />
        <script>
            $(function () {
                var i = 0;
                            $("#SelectBox").on(
                    "mousedown", ".SelectText", function (e) {
                        i++;
                        var thisID = $(this);
                        var inputID = "<input id='input_" + i + "'>";
                        $("#SelectBox").append(inputID);
                        inputID = $("#input_" + i + "");
                        inputID.css({ "position": "absolute" });
                        var of = inputID.offset();
                        var px = e.pageX - of.left, py = e.pageY - of.top;
                        $(document).on({
                            "mousemove": function (e) {
                                inputID.offset({ top: e.pageY - py, left: e.pageX - px });
                            },
                            "mouseup": function () {
                                $(this).off("mousemove");
                            }
                        })
                    }
                );
                
            });    </script>
    </head>
    <body>
        <div id="SelectBox"><span class="SelectText" >文本框</span></div>
    </body>
    </html>
    大神：效果是对的了，但是还有一些细节，我们可以加个QQ吗？我找问下你，2083899296，我的，麻烦你加一下