139 lines
5.5 KiB
PHP
139 lines
5.5 KiB
PHP
<?php
|
|
$arrayBox1 = array(
|
|
"5" => "Test5Box1",
|
|
"1" => "Test1Box1",
|
|
"2" => "Test2Box1",
|
|
"3" => "Test3Box1"
|
|
);
|
|
|
|
$arrayBox3 = array(
|
|
"9" => "Test5Box3",
|
|
"10" => "Test1Box3",
|
|
"11" => "Test2Box3",
|
|
"12" => "Test3Box3"
|
|
);
|
|
|
|
$arrayBox2 = array(
|
|
"6" => "Test1Box2",
|
|
"7" => "Test2Box2",
|
|
"8" => "Test3Box2"
|
|
);
|
|
|
|
$arrayBox4 = array(
|
|
"13" => "Test1Box4",
|
|
"14" => "Test2Box4",
|
|
"15" => "Test3Box4"
|
|
);
|
|
|
|
$assocArrayBox1 = array_values($arrayBox1);
|
|
$assocArrayBox2 = array_values($arrayBox2);
|
|
$assocArrayBox3 = array_values($arrayBox3);
|
|
$assocArrayBox4 = array_values($arrayBox4);
|
|
|
|
// ksort($arrayBox1);
|
|
// ksort($arrayBox2);
|
|
// ksort($arrayBox3);
|
|
// ksort($arrayBox4);
|
|
|
|
function drawBox($arrayBox1, $arrayBox2, $arrayBox3, $arrayBox4) {
|
|
$html_output = '<div class="panel panel-default divBox" style="float:left; width:98%; margin-left: 2%; margin-top: 2%">' . "\n";
|
|
$html_output .= ' <div class="panel-heading" style="margin-left:15px; margin-top:10px;">Reiter1</div>' . "\n";
|
|
$html_output .= ' <div class="panel-body" style="border-top:1px solid; border-radius:10px; width:100%;" id="divBox1">'. "\n";
|
|
foreach ($arrayBox1 as $key => $value) {
|
|
$html_output .= ' <div class="divBoxes" style="float:left;" id="'. $key . ';' . $value .'">'. $value .'</div>' . "\n";
|
|
}
|
|
$html_output .= ' </div>' . "\n";
|
|
$html_output .= '<div style="clear: both;"></div>' . "\n";
|
|
$html_output .= ' <div class="panel-body" style="border-top:1px solid; border-radius:10px; width:100%;" id="divBox3">'. "\n";
|
|
foreach ($arrayBox3 as $key => $value) {
|
|
$html_output .= ' <div class="divBoxes" style="float:left;" id="'. $key . ';' . $value .'">'. $value .'</div>' . "\n";
|
|
}
|
|
$html_output .= ' </div>' . "\n";
|
|
$html_output .= '</div>' . "\n";
|
|
|
|
$html_output .= '<div style="clear: both;"></div>' . "\n";
|
|
|
|
$html_output .= '<div class="panel panel-default divBox" style="float:left; width:98%; margin-left: 2%; margin-top: 2%">' . "\n";
|
|
$html_output .= ' <div class="panel-heading" style="margin-left:15px; margin-top:10px;">Reiter2</div>' . "\n";
|
|
$html_output .= ' <div class="panel-body" style="border-top:1px solid; border-radius:10px; width:100%;" id="divBox2">'. "\n";
|
|
foreach ($arrayBox2 as $key => $value) {
|
|
$html_output .= ' <div class="divBoxes" style="float:left;" id="'. $key .';'. $value .'">'. $value .'</div>' . "\n";
|
|
}
|
|
$html_output .= ' </div>' . "\n";
|
|
$html_output .= '<div style="clear: both;"></div>' . "\n";
|
|
$html_output .= ' <div class="panel-body" style="border-top:1px solid; border-radius:10px; width:100%;" id="divBox4">'. "\n";
|
|
foreach ($arrayBox4 as $key => $value) {
|
|
$html_output .= ' <div class="divBoxes" style="float:left;" id="'. $key .';'. $value .'">'. $value .'</div>' . "\n";
|
|
}
|
|
$html_output .= ' </div>' . "\n";
|
|
$html_output .= '</div>' . "\n";
|
|
|
|
return $html_output;
|
|
}
|
|
?>
|
|
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery Sortable</title>
|
|
<script src="../js/jquery.js"></script>
|
|
<script type="text/javascript" src="../js/jquery-ui.custom.min.js"></script>
|
|
<link rel="stylesheet" href="../css/jquery-ui.custom.min.css" type="text/css" />
|
|
<style>
|
|
.divBoxes {
|
|
border: 1px solid;
|
|
border-radius: 10px;
|
|
text-align:center;
|
|
width: 20%;
|
|
margin-top: 2%;
|
|
margin-left: 2%;
|
|
margin-right: 2%;
|
|
margin-bottom: 2%;
|
|
}
|
|
|
|
.divBox {
|
|
border: 1px solid;
|
|
border-radius: 5px;
|
|
min-height: 180px;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
$("#divBox1, #divBox3").sortable({
|
|
connectWith:"#divBox1, #divBox3"
|
|
});
|
|
|
|
$("#divBox2, #divBox4").sortable({
|
|
connectWith:"#divBox2, #divBox4"
|
|
});
|
|
|
|
$(function () {
|
|
$("#submit").bind("click", function () {
|
|
var box1 = $( "#divBox1" ).sortable("toArray");
|
|
var box3 = $( "#divBox3" ).sortable("toArray");
|
|
var box2 = $( "#divBox2" ).sortable("toArray");
|
|
var box4 = $( "#divBox4" ).sortable("toArray");
|
|
// alert('box1: ' + box1 + ' ' + 'box2: ' + box2 + ' ' + 'box3: ' + box3 + ' ' + 'box4: ' + box4);
|
|
alert('box1: ' + box1);
|
|
alert('box2: ' + box2);
|
|
alert('box3: ' + box3);
|
|
alert('box4: ' + box4);
|
|
var myUrl = "multisort.php?box1=" + encodeURIComponent(box1) + "&box2=" + encodeURIComponent(box2) + "&box3=" + encodeURIComponent(box3) + "&box4=" + encodeURIComponent(box4);
|
|
// window.location.href = myUrl;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<?php echo drawBox($arrayBox1, $arrayBox2, $arrayBox3, $arrayBox4); ?>
|
|
<div style="clear: both;"></div>
|
|
<input type="hidden" name="box1" id="box1-data"/>
|
|
<input type="hidden" name="box3" id="box3-data"/>
|
|
<input type="hidden" name="box2" id="box2-data"/>
|
|
<input type="hidden" name="box4" id="box4-data"/>
|
|
<br/>
|
|
<input style="margin-left: 0.5%; width: 10%; height:8%; position: absolute; margin-left: 2%" id="submit" type="submit" class="btn btn-primary" value="Submit">
|
|
</body>
|
|
</html>
|