I am using a Php With Jquery Ui. Records Are Comming in the a textbox. Each textbox only contains a single alphabet. now i have to drag this textbox and put the value of this textbox into another textbox..
This is the php code fetching the each record of alphabet in a single textbox
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>";
}
}
?>
After that i have drag the textbox and it is dragging but when i am dropping in the textbox it is not working
Example- drag textbox value in an another textbox
<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>
