Question

我正在使用Php与Jquery Ui。记录正在文本框中进行。每个文本框仅包含一个字母。现在我必须拖动此文本框并将此文本框的值放入另一个文本框中。

这是在单个文本框中获取每个字母表记录的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>";

            }
    }

?>

之后我拖动了文本框并且正在拖动但是当我在文本框中删除时它无法正常工作

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

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

jquery ui拖动文本框中的按钮

0 个答案: