從 Mysql 數據庫中拖放區域中的人

Question

我想創建一個 web 頁面，這樣我就可以通過將人員拖入區域並更新數據庫中的區域來為人員分配訪問區域。

我設法使用拖放 javascript 並檢索數據庫中的人員列表。

但我想找到最佳方式在頁面加載時將人員分類到正確的框中，然后我希望能夠在將人員放入區域時更改 Mysql 數據庫中的區域編號。

這是我當前的代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>📌 Drag and Drop</title>

        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <main class="board">
            <div class="column column-zone1" ondrop="drop(event)" ondragover="allowDrop(event)">
                <h2>Zone 1</h2>
                <div class="container">

        <table>
        <div class="column column-ip" ondrop="drop(event)" ondragover="allowDrop(event)">
            <?php include('EmployesDrag.php')
            ?>
        </div>
        </table>
    </div>
            </div>
            <div class="column column-zone2" ondrop="drop(event)" ondragover="allowDrop(event)">
                <h2>Zone 2</h2>
            </div>
            <div class="column column-zone3" ondrop="drop(event)" ondragover="allowDrop(event)">
                <h2>Zone 3</h2>
            </div>
        </main>

        <script src="js/DragDrop.js"></script>
    </body>
</html>

<?php 

          //connexion à la base de donnée
          include_once "connexion.php";               
                //requête pour afficher les infos d'un employé
                $sql="SELECT prenom , nom FROM personnel";

                $result=mysqli_query($con,$sql);



                if ($result)
                  {
                  // Return the number of rows in result set
                  $rowcount=mysqli_num_rows($result);
                  }
        
                if($rowcount == 0){
                    //s'il n'existe pas d'employé dans la base de donné , alors on affiche ce message :
                    echo "Il n'y a pas encore d'employé ajouter !" ;
                    
                }else {

                    //si non , affichons la liste de tous les employés
                    while($row=$result->fetch_assoc()){
                        ?>
                        <tr>
                            <article class="card" draggable="true" ondragstart="drag(event)" data-id="1"><?=$row['nom']?></td>
                        </tr>
                        <?php
                }
                  // Free result set
                  mysqli_free_result($result);
                }
            ?>

const dragStart = target => {
    target.classList.add('dragging');
};

const dragEnd = target => {
    target.classList.remove('dragging');
};

const dragEnter = event => {
    event.currentTarget.classList.add('drop');
};

const dragLeave = event => {
    event.currentTarget.classList.remove('drop');
};

const drag = event => {
    event.dataTransfer.setData('text/html', event.currentTarget.outerHTML);
    event.dataTransfer.setData('text/plain', event.currentTarget.dataset.id);
};

const drop = event => {
    document.querySelectorAll('.column').forEach(column => column.classList.remove('drop'));
    document.querySelector(`[data-id="${event.dataTransfer.getData('text/plain')}"]`).remove();

    event.preventDefault();
    event.currentTarget.innerHTML = event.currentTarget.innerHTML + event.dataTransfer.getData('text/html');
};

const allowDrop = event => {
    event.preventDefault();
};

document.querySelectorAll('.column').forEach(column => {
    column.addEventListener('dragenter', dragEnter);
    column.addEventListener('dragleave', dragLeave);
});

document.addEventListener('dragstart', e => {
    if (e.target.className.includes('card')) {
        dragStart(e.target);
    }
});

document.addEventListener('dragend', e => {
    if (e.target.className.includes('card')) {
        dragEnd(e.target);
    }
});

要在右欄中顯示人員，我可以制作 3 個不同的 php 頁面並執行查詢 $sql="SELECT firstname, lastname FROM personal where zoneAccess = 1";

然后 $sql="SELECT firstname, lastname FROM personal where zoneAccess = 2";

然后 $sql="SELECT firstname, lastname FROM personal where zoneAccess = 3";

但我知道這不是正確的做法。 你能幫我改進一下嗎？ 以及如何在數據庫的 zoneAccess 字段中寫入所選區域的編號？

謝謝，

凱文。

Answer 1

我找到了一種使一切正常的方法，但我的代碼沒有優化：

對於我想要拖放的每個區域，我執行一個 MYSQL 請求來檢索與每個區域關聯的名稱：

require_once('connexion.php');
$sqlZone1    = "SELECT id, nom, zoneAcces FROM personnel where zoneAcces = '1' ORDER 
                     BY id desc";
$zone1Result = mysqli_query($con, $sqlZone1);
//Fetch all zone1 list items
$zone1Items   = mysqli_fetch_all($zone1Result,MYSQLI_ASSOC);

//Get Zone2 items
$sqlZone2     = "SELECT id, nom, zoneAcces FROM personnel where zoneAcces = '2' ORDER 
                     BY id desc";
$zone2Result    = mysqli_query($con, $sqlZone2);
//Fetch all Zone2 items
$zone2Items     = mysqli_fetch_all($zone2Result, MYSQLI_ASSOC);

...

然后我為要拖放的區域創建 DIV

 <div id="droppable1" class="ui-widget-header">
  
 <?php foreach ($zone1Items as $key => $item) { ?>

   <div class="personnel1" data-itemid=<?php echo $item['id'] ?> >

     <p><strong><?php echo $item['nom'] ?></strong></p>

     <hr />

   </div>

 <?php } ?> 
  
</div>

<div id="droppable2" class="ui-widget-header">

  <?php foreach ($zone2Items as $key => $bitem) { ?>

    <div class="personnel2" data-itemid=<?php echo $bitem['id'] ?>>

      <p><strong><?php echo $bitem['nom'] ?></strong></p>

      <hr />

    </div>

  <?php } ?>

</div>
...

然后為每個區域創建 javascript 以允許拖放，並為每個更新提供指向 php 文件的鏈接

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
 <script>

  $( function() {

$( ".personnel1" ).draggable();

$( "#droppable1" ).droppable({

  drop: function( event, ui ) {
     
      $(this).addClass( "ui-state-highlight" );

      var itemid = ui.draggable.attr('data-itemid')
      
      $.ajax({
         method: "POST",
       
         url: "updatePHP/update_item_status1.php",
         data:{'itemid': itemid}, 
      }).done(function( data ) {
         var result = $.parseJSON(data);
       
       });
     }
  });
});


  $( function() {

    $( ".personnel2" ).draggable();

    $( "#droppable2" ).droppable({
 
      drop: function( event, ui ) {
         
          $(this).addClass( "ui-state-highlight" );
 
          var itemid = ui.draggable.attr('data-itemid')
          
          $.ajax({
             method: "POST",
           
             url: "updatePHP/update_item_status2.php",
             data:{'itemid': itemid}, 
          }).done(function( data ) {
             var result = $.parseJSON(data);
           
           });
         }
      });
  });

因此，對於每個更新，我都有一個不同的 php 文件，其中只有 zoneAcces = '1' 或 zoneAcces = '2' 或......不同

<?php

 require_once('../connexion.php');

  $itemid  = intval($_POST['itemid']);
  
 
 //SQL query to get results from database

  $sql = "update personnel set zoneAcces = '1' where id = $itemid";

  $con->query($sql);
    
  $con->close();

  //send a JSON encded array to client
   
  echo json_encode(array('success'=>1));

從 Mysql 數據庫中拖放區域中的人

問題描述

1 個解決方案

解決方案1
0 2023-01-17 13:55:56

從 Mysql 數據庫中拖放區域中的人

問題描述

1 個解決方案

解決方案1 0 2023-01-17 13:55:56

解決方案1
0 2023-01-17 13:55:56