0
ドラッグアンドドロップのページを作成しました。このページでドラッグ可能なスペースに要素がクローンされ、データベースに格納されます。ID、高さ、幅、 x_pos、y_pos。この作業はすべて.jsファイルで行われます。どうすればjavascriptページのデータを取得する必要がありますか？要素が以前に削除されたかどうかを確認します。ページをリロードすると、最初から始まります。要素をドラッグする必要があります。誰もが何か考えを与えることができます。ここデータベースからデータを取り出し、ドラッグドロップで使用します
// JavaScript Document
$(document).ready(function() {
var x = null;
//Make element draggable
$(".drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit'
});
var i=1,j=0;
var x1,x2,y1,y2;
var sf=pf; //this is the scalig factor
var tmp;
var fty=ft; // this is the floor_type i'm getting from php page
var fd=fid;
$("#droppable").droppable({
drop: function(e, ui) {
var attr=ui.helper.attr('id');
// document.write(attr);
if(typeof attr == typeof undefined || attr == false)
{
ui.helper.attr('id',"id"+i);
}
x = ui.helper.clone().bind("click",'img',function(){
alert("clicked"+ ui.helper.attr('id'));
var cor=window.prompt("Enter coordinates width*height");
tmp=ui.helper.attr('id');
//document.write("position");
var leftpos=($(this).offset().left) - 210;
var toppos=($(this).offset().top);
//document.write("position" + leftpos+" " + toppos);
var c=cor.split("*");
var wt=c[0];
var ht=c[1];
var w=wt*sf;
var h=ht*sf;
$(this).width(w);
$(this).height(h);
var leftpos=($(this).offset().left)-241;
var toppos=($(this).offset().top);
alert("position"+ leftpos + toppos);
window.location.href="roomdata.php?id="+tmp+"&"+"width="+w+"&"+"height="+h+"&"+"leftpos="+leftpos+"&"+"toppos="+toppos+"&"+"floor_type="+fty+"&"+"floor_id="+fd;
});
x.draggable({
helper: 'original',
containment: '#droppable',
tolerance: 'fit'
});
x.appendTo('#droppable');
ui.helper.remove();
i++;
}
});
});
//ROOMDATA.PHP
<?php
include("config.php");
$rid=$_GET['id'];
$wth=$_GET['width'];
$hgt=$_GET['height'];
$lp=$_GET['leftpos'];
$tp=$_GET['toppos'];
$ft=$_GET['floor_type'];
$fid=$_GET['floor_id'];
//echo "hello". $rid." ".$wth." ".$hgt." ".$lp." ".$tp." ".$ft." ";
$sql="Insert into room_m(floor_id,room_as_id,width,height,start_x,start_y)values('".$fid."','".$rid."','".$wth."','".$hgt."','".$lp."','".$tp."')";
$result=mysqli_query($con,$sql);
if($result)
{
//echo "done";
header("location:rooms.php");
}
else
echo "error";
?>
は、HTMLがside.I'm別のページすなわちフロアIDからデータを取得し、その後、私は取得データに基づいて床を生成するためにも、PHPを使用するためのコードです。 フロアID = 0を選択した場合と同様にセッションを使用していますが、ユーザーがフロアにルームを追加し終えるまでは同じままです。 新しい部屋を生成するという新機能が既に存在する場合は、データベースからデータを取得してからdivタグを表示します。ただし、divタグを表示する方法がわかりません。データを取得していますデータベースから。
<html>
<head>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" >
google.load("jquery", "1.6.3");
google.load("jqueryui", "1.8.16");
</script>
<link rel="stylesheet" type="text/css" href="jqueryui1.css"/>
<!--<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>-->
<script src="dragndrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="jqueryui-ruler/css/jquery.ui.ruler.css">
<script src="external/jquery-1.11.1.min.js"></script>
<script src="external/jquery-ui.min.js"></script>
<script src="jqueryui-ruler/js/jquery.ui.ruler.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$('#droppable').ruler();
});
</script>
<style type="text/css">
.col{
float:left;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
#col1{
width:200px;
height:500px;
border:1px solid black;
}
.drag{
width:100px;
border:1px solid black;
height:40px;
position:relative;
background-color:red;
background-image:url(restaurant/8793_532242100147879_270911928_n.jpg);
}
#droppable{
padding-top:18px;
padding-left:18px;
padding-right:20px;
border:1px solid black;
}
</style>
</head>
<body>
<?php
require("config.php");
$id=$_SESSION['restid'];
if(isset($_SESSION['ft'])){
$ft=$_SESSION['ft'];
$query="select floor_id,width,height from floor_m where floor_type='".$ft."' and rest_id='".$id."'";
$res1=mysqli_query($con,$query);
$row1=mysqli_fetch_row($res1);
$fd=$row1[0];
$w=$row1[1];
$h=$row1[2];
echo $fd;
$query2="select room_as_id,width,height,start_x,start_y from room_m where floor_id='".$fd."'";
$res2=mysqli_query($con,$query2);
$row2=mysqli_fetch_row($res2);
$rai=$row2[0];
$ww=$row2[1];
$hh=$row2[2];
$xx=$row2[3];
$yy=$row2[4];
echo $rai,$ww,$hh,$xx,$yy;
$wd=500/$w;
$_SESSION['wd']=$wd;
$_SESSION['ft']=$ft;
$_SESSION['fid']=$fd;
echo '<script>var pf = '.json_encode($_SESSION['wd']).';
var ft='.json_encode($_SESSION['ft']).';
var fid='.json_encode($_SESSION['fid']).';</script>';
$ht=$h*$wd;
}
else{
$ft=$_POST['fl_type'];
//echo $ft;
$sql="select width,height,floor_id from floor_m where floor_type='".$ft."' and rest_id='".$id."'";
//echo $sql;
$res=mysqli_query($con,$sql);
$row=mysqli_fetch_row($res);
$w=$row[0];
$h=$row[1];
$fid=$row[2];
$wd=500/$w;
$_SESSION['wd']=$wd;
$_SESSION['ft']=$ft;
$_SESSION['fid']=$fid;
echo '<script>var pf = '.json_encode($_SESSION['wd']).';
var ft='.json_encode($_SESSION['ft']).';
var fid='.json_encode($_SESSION['fid']).';</script>';
$ht=$h*$wd;
}
//echo $wd,$ht;
?>
<div id="wrapper">
<div class = "col" id="col1">
<img src="" id="drag1" class="drag">
</div>
<div class="col" id="droppable" style="width:500px;position:relative; height:<?php echo $ht;?>">
</div>
</div>
</body>
</html>
あなたの 'roomdata.php'はどのように見えますか？ –
@David Wylyコードを編集しました。 –
ありがとうございます。私はこれを私のローカルマシンで再現しようとしていますが、これが機能するためのHTML構造がわかりません。 HTMLのサンプルを削除したり削除したりできますか？ –