鼠标拖拽

夏夜钊 2017-08-18 10:04:21

我想要的效果是这样的，鼠标拖拽当前标签里的值，拖到另一个地方之后（相当于复制）改变值；但是原先的值还是不改变的；求大神帮实现；

就像图片中显示的那样，我拖动【1】处的文字，在【2】处显示文本框的标签，求大神！！！

...全文

325 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

夏夜钊 2017-08-21

打赏
举报

引用 4 楼 yuqiz1981 的回复:

[quote=引用 3 楼 qq_36329389 的回复:] [quote=引用 1 楼 yuqiz1981 的回复:] 同一个浏览器里吗？

是的，同一个浏览器的同一个界面[/quote]

<!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>

[/quote] 大神：效果是对的了，但是还有一些细节，我们可以加个QQ吗？我找问下你，2083899296，我的，麻烦你加一下

yuqiz1981 2017-08-20

打赏
举报

引用 3 楼 qq_36329389 的回复:

[quote=引用 1 楼 yuqiz1981 的回复:] 同一个浏览器里吗？

是的，同一个浏览器的同一个界面[/quote]

<!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>

yuqiz1981 2017-08-19