Javascript jquery ui在文本框中拖动按钮

我正在使用带有Jquery Ui的Php。记录在文本框中提交。每个文本框仅包含一个字母表。现在我必须拖动这个文本框，并将这个文本框的值放入另一个文本框中

这是在单个文本框中获取每个字母记录的php代码

    if($_POST['fetch'])
    {
        $code_words = $_POST['code_words'];

        $count = mysql_query("SELECT COUNT(*) FROM tbl_words WHERE id = '$code_words'")or die("query failed");  
        $row_count = mysql_fetch_row($count);
        if($row_count[0] > 0)
        {
            $sql = mysql_query("SELECT word FROM tbl_words WHERE id = '$code_words'")or die("query failed");    
            $row = mysql_fetch_array($sql);
            $word = $row['word'];

echo "<div id='source'>";           
            echo "<div class='fetched_words'>"; 
            echo "<span id='word'>".$word."</span>";
            if($_POST['fetch'])
            {
                $code_words = str_split($word); 

    for($x = 0 ; $x < count($code_words); $x++) {

echo "<input index='$x' maxlength='1' class='draggable' type='button' value='$code_words[$x]'/>";

        }

            }

            echo "</div>";

            }
    }

?>

之后，我拖动文本框，它正在拖动，但当我将其放入文本框时，它不工作

    if($_POST['fetch'])
    {
        $code_words = $_POST['code_words'];

        $count = mysql_query("SELECT COUNT(*) FROM tbl_words WHERE id = '$code_words'")or die("query failed");  
        $row_count = mysql_fetch_row($count);
        if($row_count[0] > 0)
        {
            $sql = mysql_query("SELECT word FROM tbl_words WHERE id = '$code_words'")or die("query failed");    
            $row = mysql_fetch_array($sql);
            $word = $row['word'];

echo "<div id='source'>";           
            echo "<div class='fetched_words'>"; 
            echo "<span id='word'>".$word."</span>";
            if($_POST['fetch'])
            {
                $code_words = str_split($word); 

    for($x = 0 ; $x < count($code_words); $x++) {

echo "<input index='$x' maxlength='1' class='draggable' type='button' value='$code_words[$x]'/>";

        }

            }

            echo "</div>";

            }
    }

?>

示例-在另一个文本框中拖动文本框值

    <link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>

    <script type="text/javascript">
        $(function() {
            $(".draggable").draggable({
                appendTo: "head",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });

            initDroppable($("#dropdiv"));
            function initDroppable($elements) {
                $elements.droppable({
                    activeClass: "state-default",
                    hoverClass: "drop-hover",


                    over: function(event, ui) {
                        var $this = $(this);
                    },
                    drop: function(event, ui) {
                        var $this = $(this);
                        if ($this.val() == '') {
                            $this.val(ui.draggable.text());
                        } else {
                            $this.val($this.val() + "," + ui.draggable.text());
                        }
                    }
                });
            }
        });
    </script>

    <style type="text/css">
        #drop-hover
        {
            border: 2px solid #bbb;
        }

        .draggable {
    width: 250px;
    height: 20px;
    background-color: #e6eaff;
    border: 2px solid #3399cc;
    margin-bottom: 1em;
    padding: 4px;
    cursor: default;
}
        #dragdiv
        {
            width: 180px;
            height: 400px;
            float: left;
        }
        #dropdiv
        {
            width: 380px;
            height: 40px;
            float: right;
            margin-right: 10px;
        }
        #dropdiv li
        {
            padding-left: 10px;
        }
        #maindiv
        {
            width: 580px;
            height: 300px;
            border: 2px solid #bbb;
        }
    </style>
</head>
<body>
<h1>FETCH</h1>
<form action="test.php" method="post">
    CODE WORDS: <input type="text" name="code_words" />
    <input type="submit" name="fetch" value="FETCH" />
</form>

            <span>Drop contact to 'To' list'</span></h3>
        <input id="dropdiv" type="text" style="overflow:scroll"  />

</body>
</html>

---

显示输出的HTML而不是PHPecho@Poplane输出显示在php中，我想输入网页的textboxView源代码并将HTML发布到问题中，而不是创建HTML或创建JSFIDLE的php