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