从 Mysql 数据库中拖放区域中的人

Question

I would like to create a web page so I can assign access zones to people by dragging the people into the zones and update the zone in the database.我想创建一个 web 页面，这样我就可以通过将人员拖入区域并更新数据库中的区域来为人员分配访问区域。

I manage to use Drag and drop javascript and retrieve the list of people in the database.我设法使用拖放 javascript 并检索数据库中的人员列表。

But I would like to find the most optimal way to sort people in the right boxes when the page loads and then I would like to be able to change the zone number in the Mysql database when a person is dropped in a zone.但我想找到最佳方式在页面加载时将人员分类到正确的框中，然后我希望能够在将人员放入区域时更改 Mysql 数据库中的区域编号。

See Image见图像

Here is my current code:这是我当前的代码：

<!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);
    }
});

To display people in the right column, I can do it by making 3 different php pages and executing the query $sql="SELECT firstname, lastname FROM personal where zoneAccess = 1";要在右栏中显示人员，我可以制作 3 个不同的 php 页面并执行查询 $sql="SELECT firstname, lastname FROM personal where zoneAccess = 1";

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

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

But I know that's not the right way to do it.但我知道这不是正确的做法。 Can you help me improve this?你能帮我改进一下吗？ And how can I do to write the number of the selected zone, in the zoneAccess field of the database?以及如何在数据库的 zoneAccess 字段中写入所选区域的编号？

Thanks,谢谢，

Kevin.凯文。

Answer 1

I found a way to make everything work, but my code is not optimized:我找到了一种使一切正常的方法，但我的代码没有优化：

For each area from/to which I want to drag and drop, I execute one MYSQL Request to retrieve the names associated with each zone:对于我想要拖放的每个区域，我执行一个 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);

...

then I create the DIV for the area to DRAG/DROP然后我为要拖放的区域创建 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>
...

Then For each zone I create the javascript to allow drag drop and with a link to a php file for each update然后为每个区域创建 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);
           
           });
         }
      });
  });

And so for each Update I've a different php file with only zoneAcces = '1' or zoneAcces = '2' or... wich is different因此，对于每个更新，我都有一个不同的 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