将 HTML 表中可拖动 DIV 的位置存储到 MySQL 数据库

发布于 2025-01-18 17:44:33 字数 3312 浏览 1 评论 0原文

我想知道/如何能够将拖动div移动到桌子上的位置的位置，因此，当重新加载页面时，它将返回到剩下（来自MySQL数据库）。

我读了一些有关此的文章，但这全都是关于与Ajax一起使用jQuery（event，ui）。

这是我的代码：

   var p = document.getElementsByTagName('p');
   var choice = document.getElementsByClassName('choice');
   var dragItem = null;
   
   for(var i of p){
        i.addEventListener('dragstart', dragStart);
        i.addEventListener('dragend', dragEnd);
   }
   function dragStart(){
        dragItem = this;
        setTimeout(()=>this.style.display = "none", 0);
   }
   function dragEnd(){
        setTimeout(()=>this.style.display = "block", 0);
        dragItem = null;
   }
   for(j of choice){
        j.addEventListener('dragover', dragOver);
        j.addEventListener('dragenter', dragEnter);
        j.addEventListener('dragleave', dragLeave);
        j.addEventListener('drop', Drop);
   }
   function Drop(){
        this.append(dragItem);
   }
   function dragOver(e){
        e.preventDefault();
        this.style.border = "2px dotted cyan";
   }
   function dragEnter(e){
        e.preventDefault();
   }
   function dragLeave(e){
        this.style.border = "none";
   }

   section{
      width: 1000px;
      height: 360px;
      margin: 100px auto;
      display: flex;
      justify-content: space-around;
   }
   h1{
      text-align: center;
   }
   div{
      width: 200px;
      height: 90%;
      padding: 20px;
      margin: 10px;
      background: #fafafa;
      box-sizing: border-box;
   }
   p{
      font-weight: bold;
      border-radius: 5px;
      padding: 5px;
      color: white;
      background: red;
   }
   table, th, td {
  border:1px solid black;
}
      button{
      width: 100px;
      height: 15px;
      padding: 15px;
      margin: 10px;
      background: gray;
      box-sizing: border-box;
   }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test drag & drop </title>
</head>
<body>
<h1> it's just a test for js </h1>
<section>
<div2>
 <table  style="width:100%">
  <tr>
    <th>time</th>
    <th>DIM</th>
    <th>LUN</th>
  </tr>
  <tr>
    <td>8:00 - 9:00</td>
    <td><div class="choice"></div> S1-1</td>
    <td><div class="choice"></div>S1-2</td>
  </tr>
  <tr>
    <td>9:00 - 10:00</td>
    <td><div class="choice"></div>S2-1</td>
    <td><div class="choice"></div>S2-2</td>
  </tr>
</table> 
<button>save</button>
</div2>
<div class="choice">
     <p draggable="true">MODULE 1</p>
     <p draggable="true">MODULE 2</p>
     <p draggable="true">MODULE 3</p>
     <p draggable="true">MODULE 4</p>
     <p draggable="true">MODULE 5</p>
</div>

</section>
</body> 
</html>

原文

I'd like to know if/how i will be able to store the position of where I move a draggable div to on the table, so when the page is reloaded, it will return to were it was left (from MySQL database).

i read some articles about that but it was all about using jquery (event, ui) with AJAX.

here's my code :

   var p = document.getElementsByTagName('p');
   var choice = document.getElementsByClassName('choice');
   var dragItem = null;
   
   for(var i of p){
        i.addEventListener('dragstart', dragStart);
        i.addEventListener('dragend', dragEnd);
   }
   function dragStart(){
        dragItem = this;
        setTimeout(()=>this.style.display = "none", 0);
   }
   function dragEnd(){
        setTimeout(()=>this.style.display = "block", 0);
        dragItem = null;
   }
   for(j of choice){
        j.addEventListener('dragover', dragOver);
        j.addEventListener('dragenter', dragEnter);
        j.addEventListener('dragleave', dragLeave);
        j.addEventListener('drop', Drop);
   }
   function Drop(){
        this.append(dragItem);
   }
   function dragOver(e){
        e.preventDefault();
        this.style.border = "2px dotted cyan";
   }
   function dragEnter(e){
        e.preventDefault();
   }
   function dragLeave(e){
        this.style.border = "none";
   }

   section{
      width: 1000px;
      height: 360px;
      margin: 100px auto;
      display: flex;
      justify-content: space-around;
   }
   h1{
      text-align: center;
   }
   div{
      width: 200px;
      height: 90%;
      padding: 20px;
      margin: 10px;
      background: #fafafa;
      box-sizing: border-box;
   }
   p{
      font-weight: bold;
      border-radius: 5px;
      padding: 5px;
      color: white;
      background: red;
   }
   table, th, td {
  border:1px solid black;
}
      button{
      width: 100px;
      height: 15px;
      padding: 15px;
      margin: 10px;
      background: gray;
      box-sizing: border-box;
   }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test drag & drop </title>
</head>
<body>
<h1> it's just a test for js </h1>
<section>
<div2>
 <table  style="width:100%">
  <tr>
    <th>time</th>
    <th>DIM</th>
    <th>LUN</th>
  </tr>
  <tr>
    <td>8:00 - 9:00</td>
    <td><div class="choice"></div> S1-1</td>
    <td><div class="choice"></div>S1-2</td>
  </tr>
  <tr>
    <td>9:00 - 10:00</td>
    <td><div class="choice"></div>S2-1</td>
    <td><div class="choice"></div>S2-2</td>
  </tr>
</table> 
<button>save</button>
</div2>
<div class="choice">
     <p draggable="true">MODULE 1</p>
     <p draggable="true">MODULE 2</p>
     <p draggable="true">MODULE 3</p>
     <p draggable="true">MODULE 4</p>
     <p draggable="true">MODULE 5</p>
</div>

</section>
</body> 
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浅笑依然 2025-01-25 17:44:33

这可能是一个过于复杂的答案。但是，我觉得最好的方法是将模块对象存储在JavaScript中。每个模块将具有位置属性，每次移动模块时都需要更新。您也可以使用data html属性将元素的位置存储在元素本身上（ https://developer.mozilla.org/en-us/docs/learlen/learn/html/howto/howto/use_data_attributes ）。这是我的代码：

JavaScript：

var dragItem = null;
let modules = loadDataFromServer();

//Initial UI
updateUI(modules);


function dragStart() {
    console.log("Start")
    dragItem = this;
    setTimeout(() => this.style.display = "none", 0);
}
function dragEnd() {
    console.log("End")
    setTimeout(() => this.style.display = "block", 0);
    dragItem = null;
}

function Drop() {
    console.log("Drop")
    console.log(dragItem)
    this.append(dragItem);
    moveModuleTo(modules.length - 1, modules[dragItem.dataset.position])
}
function dragOver(e) {
    e.preventDefault();
    this.style.border = "2px dotted cyan";
}
function dragEnter(e) {
    e.preventDefault();
}
function dragLeave(e) {
    this.style.border = "none";
}

//Added Code

function loadDataFromServer() {
    //return an array of modules
    return [
        {
            title: "Module 1",
            position: 0
        },
        {
            title: "Module 2",
            position: 1
        },
        {
            title: "Module 3",
            position: 2
        },
        {
            title: "Module 4",
            position: 3
        },
        {
            title: "Module 5",
            position: 4
        },
    ]
}

function moveModuleTo(position, module) {
    if (module.position < position) {
        //Module is moving down the list
        console.log(position)
        console.log(module.position)
        for (let i = module.position; i < position; i++) {
            modules[i] = modules[i + 1];
            modules[i].position = i
        }
    } else {
        //Module is moving up the list
        for (let i = module.position - 1; i > position; i--) {
            modules[i] = modules[i - 1]
            modules[i].position = i + 1;
        }
    }
    modules[position] = module
    modules[position].position = position
    console.log(modules)
    //Update UI and database
    updateUI(modules)
}

function updateUI(modules) {
    let choice = document.getElementsByClassName('choice');

    //Remove old Modules
    const draggableContainer = document.getElementById("draggableContainer")
    while (draggableContainer.firstChild) {
        draggableContainer.removeChild(draggableContainer.lastChild)
    }

    //Add updated Modules
    modules.forEach(item => {
        console.log("yeet")
        let newDraggableItem = document.createElement('p')
        newDraggableItem.innerHTML = `${item.title}`
        newDraggableItem.draggable = true
        newDraggableItem.dataset.position = item.position
        draggableContainer.appendChild(newDraggableItem);
    });

    //ReAdd Event listeners

    var p = document.getElementsByTagName('p');

    for (var i of p) {
        i.addEventListener('dragstart', dragStart);
        i.addEventListener('dragend', dragEnd);
    }

    for (j of choice) {
        j.addEventListener('dragover', dragOver);
        j.addEventListener('dragenter', dragEnter);
        j.addEventListener('dragleave', dragLeave);
        j.addEventListener('drop', Drop);
    }
}

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>test drag & drop </title>
</head>
<body>
    <h1> it's just a test for js </h1>
    <section>
        <div2>
            <table style="width:100%">
                <tr>
                    <th>time</th>
                    <th>DIM</th>
                    <th>LUN</th>
                </tr>
                <tr>
                    <td>8:00 - 9:00</td>
                    <td>
                        <div class="choice"></div> S1-1
                    </td>
                    <td>
                        <div class="choice"></div>S1-2
                    </td>
                </tr>
                <tr>
                    <td>9:00 - 10:00</td>
                    <td>
                        <div class="choice"></div>S2-1
                    </td>
                    <td>
                        <div class="choice"></div>S2-2
                    </td>
                </tr>
            </table>
            <button>save</button>
        </div2>
        <div class="choice" id="draggableContainer"></div>

    </section>
    <script src="app.js"></script>
</body>
</html>

对于更新数据库，您可以每次移动模块时都会制作Write数据库调用。然后，每次加载页面时，只需根据位置值对数组进行排序。希望这有帮助！

This may be an overcomplicated answer. But I feel the best way to go about this is to store an array of module objects inside your javascript. Each module would have a position attribute that would need to be updated every time a module is moved. You could also use the data html attribute to store the position of the element on the element itself(https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). Here is my code:

Javascript:

var dragItem = null;
let modules = loadDataFromServer();

//Initial UI
updateUI(modules);


function dragStart() {
    console.log("Start")
    dragItem = this;
    setTimeout(() => this.style.display = "none", 0);
}
function dragEnd() {
    console.log("End")
    setTimeout(() => this.style.display = "block", 0);
    dragItem = null;
}

function Drop() {
    console.log("Drop")
    console.log(dragItem)
    this.append(dragItem);
    moveModuleTo(modules.length - 1, modules[dragItem.dataset.position])
}
function dragOver(e) {
    e.preventDefault();
    this.style.border = "2px dotted cyan";
}
function dragEnter(e) {
    e.preventDefault();
}
function dragLeave(e) {
    this.style.border = "none";
}

//Added Code

function loadDataFromServer() {
    //return an array of modules
    return [
        {
            title: "Module 1",
            position: 0
        },
        {
            title: "Module 2",
            position: 1
        },
        {
            title: "Module 3",
            position: 2
        },
        {
            title: "Module 4",
            position: 3
        },
        {
            title: "Module 5",
            position: 4
        },
    ]
}

function moveModuleTo(position, module) {
    if (module.position < position) {
        //Module is moving down the list
        console.log(position)
        console.log(module.position)
        for (let i = module.position; i < position; i++) {
            modules[i] = modules[i + 1];
            modules[i].position = i
        }
    } else {
        //Module is moving up the list
        for (let i = module.position - 1; i > position; i--) {
            modules[i] = modules[i - 1]
            modules[i].position = i + 1;
        }
    }
    modules[position] = module
    modules[position].position = position
    console.log(modules)
    //Update UI and database
    updateUI(modules)
}

function updateUI(modules) {
    let choice = document.getElementsByClassName('choice');

    //Remove old Modules
    const draggableContainer = document.getElementById("draggableContainer")
    while (draggableContainer.firstChild) {
        draggableContainer.removeChild(draggableContainer.lastChild)
    }

    //Add updated Modules
    modules.forEach(item => {
        console.log("yeet")
        let newDraggableItem = document.createElement('p')
        newDraggableItem.innerHTML = `${item.title}`
        newDraggableItem.draggable = true
        newDraggableItem.dataset.position = item.position
        draggableContainer.appendChild(newDraggableItem);
    });

    //ReAdd Event listeners

    var p = document.getElementsByTagName('p');

    for (var i of p) {
        i.addEventListener('dragstart', dragStart);
        i.addEventListener('dragend', dragEnd);
    }

    for (j of choice) {
        j.addEventListener('dragover', dragOver);
        j.addEventListener('dragenter', dragEnter);
        j.addEventListener('dragleave', dragLeave);
        j.addEventListener('drop', Drop);
    }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>test drag & drop </title>
</head>
<body>
    <h1> it's just a test for js </h1>
    <section>
        <div2>
            <table style="width:100%">
                <tr>
                    <th>time</th>
                    <th>DIM</th>
                    <th>LUN</th>
                </tr>
                <tr>
                    <td>8:00 - 9:00</td>
                    <td>
                        <div class="choice"></div> S1-1
                    </td>
                    <td>
                        <div class="choice"></div>S1-2
                    </td>
                </tr>
                <tr>
                    <td>9:00 - 10:00</td>
                    <td>
                        <div class="choice"></div>S2-1
                    </td>
                    <td>
                        <div class="choice"></div>S2-2
                    </td>
                </tr>
            </table>
            <button>save</button>
        </div2>
        <div class="choice" id="draggableContainer"></div>

    </section>
    <script src="app.js"></script>
</body>
</html>

For updating a database you could make a write database call every time you move a module. Then every time the page is loaded just sort the array based on the position value. Hope this helps!

回复收藏 0 原文

~没有更多了~