检索要显示的数据以进行拖放

时间:2014-06-24 01:50:40

标签: php html5

正如您所见,div1将成为第一个框。句子"我的名字叫小明。"应该出现在第一个框内。这句话"我的名字叫小明。"来自数据库,已从数据库中检索出来。我想要这句话"我的名字叫小明。"显示在第一个框内而不是(http://pho.to/66hLl)。请单击链接以查看句子现在出现的位置。我想要句子"我的名字叫小明。"而是出现在顶部框中,以便我可以将单个字符拖动到第二个框中!谢谢!:)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello world</title>
    <style>
        div {width:300px; height:200px; border:1px solid; margin:50px; border-radius:10px;          
        background-color:rgba(255,0,0,0.1); color:black; padding:20px;}
        #drag1{cursor:move}
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }
        function drag(ev) {
            ev.dataTransfer.setData("Text",ev.target.id);
        }
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>

</head>
<body>
<center>

<h1>create a proper sentence by dragging to the exact place.</h1>


<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<section id="drag1">

<a class= "<?php  echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " .     

$row[$order[1]] . " " .
$row[$order[2]] . " " . $row[$order[3]] ."</dd>";  ?>"</a>width="100"height="100"  
draggable="true" ondragstart="drag(event)"/></div>



<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>


<?php
    // Connect to database server
    mysql_connect("localhost", "root", "password") or die (mysql_error ());

    // Select database
    mysql_select_db("login") or die(mysql_error());

    // set utf8 unicode mode to set chinese character 

    mysql_query ( 'SET NAMES utf8' ); 

    $strSQL = "SELECT * FROM chinesesen WHERE id=1 ;";


    //create an array with numbers 1-4
    $order = array(1,2,3,4);

    //shuffle them in random order
    $rs = mysql_query($strSQL);

    // Loop the recordset $rs
    while($row = mysql_fetch_array($rs)) {
    // Write the data of the person
    //Display all the array values from 0-3 (array index starts from 0)
    echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .
    $row[$order[2]] . " " . $row[$order[3]] ."</dd>";

    }
    // Close the database connection
    mysql_close();
?>

1 个答案:

答案 0 :(得分:0)

在尝试访问它们之前,您需要实例化PHP声明

 <?php
// Connect to database server
mysql_connect("localhost", "root", "password") or die (mysql_error ());

// Select database
mysql_select_db("login") or die(mysql_error());

// set utf8 unicode mode to set chinese character 

mysql_query ( 'SET NAMES utf8' ); 

$strSQL = "SELECT * FROM chinesesen WHERE id=1 ;";


//create an array with numbers 1-4
 $order = array(1,2,3,4);

//shuffle them in random order
 $rs = mysql_query($strSQL);


 while($row = mysql_fetch_array($rs)) {

    $sentence =  "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .
   $row[$order[2]] . " " . $row[$order[3]] ."</dd>";

}

 mysql_close();
 ?>


  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <section id="drag1">

  <a class= "<?php  echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " .     

   $row[$order[1]] . " " .
   $row[$order[2]] . " " . $row[$order[3]] ."</dd>";  ?>
   <?php echo $sentence;?>
   </a>
   <div width="100" height="100"  
   draggable="true" ondragstart="drag(event)"/></div>



<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

编辑

如果你想做我认为你想做的事情......那么这可能是......

  <?php foreach($row as $r){;?>

    <div width="100" height="100" draggable="true" ondragstart="drag(event)"/>
       <?php echo $r;?>
    </div>

   <? };?>