关于#javascript#的问题：js 怎么实现页面文字能拖动A内容到input框中变成B内容

js 怎么实现页面文字能拖动A内容到input框中变成B内容？

使用h5 drag

关于文字拖拽，可以看一下这篇文章
https://blog.csdn.net/qq_37050372/article/details/84899163


<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>FileReader</title>
        <style>
            .box {
                position: absolute;
                width: 100px;
                height: 100px;
                background: red;
                cursor: move;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                var source = document.getElementById('inputA');
                var target = document.getElementById('inputB');
                target.ondrop = function(event) {
                    var e = event || window.event
                    e.target.value = '';

                    var text = window.getSelection().toString();
                    console.log(text);
                    e.target.value += ' for input B ';
                }

            }
        </script>
    </head>

    <body>
        <div>
            输入框A<input type="text" id="inputA" />
            输入框B<input type="text" id="inputB" />

    </body>

</html>



<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #div1 {
            width: 480px;
            height: 120px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>

</head>

<body>

    <p>请把 W3School 的图片拖放到矩形中：</p>

    <div id="div1" ondrop="drop(event)" ondragover="dragover(event)"></div>
    <br />
    <img id="drag1"
        src="https://tse1-mm.cn.bing.net/th?id=OIP.PTZJ51e7xutqxF_1nXpdawHaEK&w=192&h=108&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
        draggable="true" ondragstart="drag(event)" />
    <img id="drag2"
        src="https://tse1-mm.cn.bing.net/th?id=OIP.PTZJ51e7xutqxF_1nXpdawHaEK&w=192&h=108&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
        draggable="true" ondragstart="drag(event)" />

    <script type="text/javascript">

        let id = null;
        function drag(ev) {
            console.log(ev, '===123')
            // ev.dataTransfer.setData("Text", ev.target.id);
            id = ev.target.id
        }

        function dragover(e) {
            e.preventDefault();
        }

        function drop(ev) {
            console.log(ev, '456')
            ev.preventDefault();
            // var data = ev.dataTransfer.getData("Text");

            // console.log(data, '=======data')
            ev.target.appendChild(document.getElementById(id));
        }

    </script>

<!-- Code injected by live-server -->
<script>
    // <![CDATA[  <-- For SVG support
    if ('WebSocket' in window) {
        (function () {
            function refreshCSS() {
                var sheets = [].slice.call(document.getElementsByTagName("link"));
                var head = document.getElementsByTagName("head")[0];
                for (var i = 0; i < sheets.length; ++i) {
                    var elem = sheets[i];
                    var parent = elem.parentElement || head;
                    parent.removeChild(elem);
                    var rel = elem.rel;
                    if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
                        var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
                        elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
                    }
                    parent.appendChild(elem);
                }
            }
            var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
            var address = protocol + window.location.host + window.location.pathname + '/ws';
            var socket = new WebSocket(address);
            socket.onmessage = function (msg) {
                if (msg.data == 'reload') window.location.reload();
                else if (msg.data == 'refreshcss') refreshCSS();
            };
            if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
                console.log('Live reload enabled.');
                sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
            }
        })();
    }
    else {
        console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
    }
    // ]]>
</script>
</body>

</html>

是只拖文字，且能重复拖。

img