javascript - 拖放 - 以表格格式保存元素被放置的位置-6ren

javascript - 拖放 - 以表格格式保存元素被放置的位置

转载作者：太空宇宙更新时间：2023-11-04 08:05:14

我试图制作一个表格布局规划器，我搜索了高低以找到我想要的结果，但没有运气。

有没有一种简单的方法可以保存元素掉落的位置...那么它在哪个单元格中？我想将它保存到 MySQL 数据库中。

我的代码基于这个例子: https://codepen.io/praveenscience/pen/rkhxw它运作良好的地方。

任何帮助都会很棒!

干杯

$(document).ready(function(){
  $('li').bind('dragstart', function(event) {
    event.originalEvent.dataTransfer.setData("text/plain",  event.target.getAttribute('id'));
  });

  $('ul').bind('dragover', function(event) {
    event.preventDefault();
  });

  $('ul').bind('dragenter', function(event) {
    $(this).addClass("over");
  });

  $('ul').bind('dragleave drop', function(event) {
    $(this).removeClass("over");
  });

  $('li').bind('drop', function(event) {
    return false;
  });

  $('ul').bind('drop', function(event) {
    var listitem = event.originalEvent.dataTransfer.getData("text/plain");
    event.target.appendChild(document.getElementById(listitem));
    event.preventDefault();
  });
});

* {
  font-family: 'Segoe UI';
}
li {
  list-style: none;
  padding: 5px;
  background: #f5f5f5;
  border-radius: 5px;
  margin: 0 0 5px;
}
ul {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  width: 30%;
  margin: 0 0.5%;
  display: inline-block;
  vertical-align: top;
}
ul.over {
  padding-bottom: 55px;
  background: url('http://www.cufonfonts.com/makeImage.php?width=650&id=1026&size=35&d=y&text=Drop%20Here') center bottom no-repeat #ccc;
}
ul.over li {
  background: #fff;
}

#board div h3 {display: inline-block; width: 30%; margin: 1%; text-align: center;}

<h1>Planning board using HTML 5 Drag & Drop</h1>
<div id="board">
    <div>
      <h3>ToDo</h3><h3>In Progress</h3><h3>Done</h3>
    </div>
    <ul id="todo">
        
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="600" height="500">
  <tr>
    <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top: medium none #111111">&nbsp;</td>
    <td width="20%" colspan="2" align="center" style="border-right-style: solid; border-right-width: 1; border-top-color: #111111; border-top-width: 1" bgcolor="#3399FF">
    <font face="Calibri"><li id="item1" draggable="true">Person 1</li></font></td>
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-style: none; border-width: medium">&nbsp;</td>
  </tr>
  <tr>
    <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td>
    <td width="20%" align="center" colspan="2" bgcolor="#3399FF">
    <font face="Calibri">8</font></td>
    <td width="10%" align="center" style="border-left-style: solid; border-left-width: 1; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="20%" align="center" colspan="2" style="border-right-style: solid; border-right-width: 1" bgcolor="#3399FF">
    <font face="Calibri">2</font></td>
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
  </tr>
  <tr>
    <td width="20%" align="center" colspan="2" style="border-left-color: #111111; border-left-width: 1" bgcolor="#3399FF">
    <font face="Calibri">7</font></td>
    <td width="60%" align="center" colspan="6"><font face="Calibri">TABLE NUMBER</font></td>
    <td width="20%" align="center" colspan="2" style="border-right-color: #111111; border-right-width: 1" bgcolor="#3399FF">
    <font face="Calibri">3</font></td>
  </tr>
  <tr>
    <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="20%" align="center" colspan="2" bgcolor="#3399FF">
    <font face="Calibri">6</font></td>
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium">&nbsp;</td>
    <td width="20%" align="center" colspan="2" bgcolor="#3399FF">
    <font face="Calibri">4</font></td>
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
  </tr>
  <tr>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="20%" align="center" colspan="2" style="border-bottom-color: #111111; border-bottom-width: 1" bgcolor="#3399FF">
    <font face="Calibri">5</font></td>
    <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
    <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
  </tr>
</table>
        <li id="item1" draggable="true">Person 2</li>
        <li id="item2" draggable="true">Person 3</li>
    </ul><!--
    --><ul id="inprogress">
    </ul><!--
    --><ul id="done">
    </ul>
</div>

最佳答案

首先，我向每个职位和人员提供了 ID。然后我在你的 on drop 函数中添加了几行代码，它在 jsonObj 中推送位置和人员的 id。然后我添加了一个带有隐藏输入的表单，可以容纳 json stringify 对象。然后单击“发送”按钮，此信息可以发送到 php 文件。还有json_decode可以得到相关信息。希望这会有所帮助。

    <h1>Planning board using HTML 5 Drag & Drop</h1>
    <div id="board">
        <div>
          <h3>ToDo</h3><h3>In Progress</h3><h3>Done</h3>
        </div>
        <ul id="todo">

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-width: 0" bordercolor="#111111" width="600" height="500">
      <tr>
        <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top: medium none #111111">&nbsp;</td>
        <td id="pos1"  width="20%" colspan="2" align="center" style="border-right-style: solid; border-right-width: 1; border-top-color: #111111; border-top-width: 1" bgcolor="#3399FF">
        <font face="Calibri">1</font></td>
        <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top: medium none #111111; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-style: none; border-width: medium">&nbsp;</td>
      </tr>
      <tr>
        <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-top-style: none; border-top-width: medium">&nbsp;</td>
        <td id="pos8" width="20%" align="center" colspan="2" bgcolor="#3399FF">
        <font face="Calibri">8</font></td>
        <td width="10%" align="center" style="border-left-style: solid; border-left-width: 1; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: solid; border-right-width: 1; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td id="pos2" width="20%" align="center" colspan="2" style="border-right-style: solid; border-right-width: 1" bgcolor="#3399FF">
        <font face="Calibri">2</font></td>
        <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
      </tr>
      <tr>
        <td  id="pos7" width="20%" align="center" colspan="2" style="border-left-color: #111111; border-left-width: 1" bgcolor="#3399FF">
        <font face="Calibri">7</font></td>
        <td width="60%" align="center" colspan="6"><font face="Calibri">TABLE NUMBER</font></td>
        <td id="pos3" width="20%" align="center" colspan="2" style="border-right-color: #111111; border-right-width: 1" bgcolor="#3399FF">
        <font face="Calibri">3</font></td>
      </tr>
      <tr>
        <td width="10%" align="center" style="border-left: medium none #111111; border-right-style: none; border-right-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td id="pos6" width="20%" align="center" colspan="2" bgcolor="#3399FF">
        <font face="Calibri">6</font></td>
        <td width="10%" align="center" style="border-right-style: none; border-right-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium">&nbsp;</td>
        <td id="pos4" width="20%" align="center" colspan="2" bgcolor="#3399FF">
        <font face="Calibri">4</font></td>
        <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom-style: none; border-bottom-width: medium">&nbsp;</td>
      </tr>
      <tr>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td id="pos5" width="20%" align="center" colspan="2" style="border-bottom-color: #111111; border-bottom-width: 1" bgcolor="#3399FF">
        <font face="Calibri">5</font></td>
        <td width="10%" align="center" style="border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right-style: none; border-right-width: medium; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
        <td width="10%" align="center" style="border-left-style: none; border-left-width: medium; border-right: medium none #111111; border-top-style: none; border-top-width: medium; border-bottom: medium none #111111">&nbsp;</td>
      </tr>
    </table>
            <li id="item1" draggable="true">Person 1</li>
            <li id="item2" draggable="true">Person 2</li>
            <li id="item3" draggable="true">Person 3</li>
            <li id="item4" draggable="true">Person 4</li>
            <li id="item5" draggable="true">Person 5</li>
            <li id="item6" draggable="true">Person 6</li>
            <li id="item7" draggable="true">Person 7</li>
            <li id="item8" draggable="true">Person 8</li>
            <li id="item9" draggable="true">Person 9</li>
            <li id="item10" draggable="true">Person 10</li>
            <li id="item11" draggable="true">Person 11</li>        
        </ul><!--
        --><ul id="inprogress">
        </ul><!--
        --><ul id="done">
        </ul>
    </div>
   <form action="test.php" method="post" id="myForm">
   <input type="hidden" id="posPeople" name="posPeople" />
   <input id="btn" type="button"  value="send" />
   </form>

脚本:

    <script>
    $(document).ready(function () {

        var jsonObj = [];            

        $('li').bind('dragstart', function(event) {
            event.originalEvent.dataTransfer.setData("text/plain",  event.target.getAttribute('id'));
        });

        $('ul').bind('dragover', function(event) {
          event.preventDefault();
        });

        $('ul').bind('dragenter', function(event) {
          $(this).addClass("over");
        });

        $('ul').bind('dragleave drop', function(event) {
          $(this).removeClass("over");
        });

        $('li').bind('drop', function(event) {
          return false;
        });

        $('ul').bind('drop', function(event) {
          var listitem = event.originalEvent.dataTransfer.getData("text/plain");
          var el = event.target; 
          //alert(el.id);
          //alert(document.getElementById(listitem).id);
          event.target.appendChild(document.getElementById(listitem));

            var item = {};
            item["pos"] = el.id;
            item["person"] = document.getElementById(listitem).id;
            jsonObj.push(item);             

          event.preventDefault();              

        });

        $("#btn").on("click", function () {                
            console.log(jsonObj);
            alert(JSON.stringify(jsonObj));

            $("#posPeople").val(JSON.stringify(jsonObj));
            $("#myForm").submit();                

        });

    });         

    </script>

那么 php 可能是:

    <?php
    $json = $_POST["posPeople"];

    var_dump(json_decode($json, true));
    $data = json_decode($json, true);

    foreach($data as $ind) {
        echo $ind['pos'] . "<br/>";
        echo $ind['person'] . "<br/>";
    }
?>

关于javascript - 拖放 - 以表格格式保存元素被放置的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46700825/

文章推荐： C程序从文件中读取特定行

文章推荐： html - 悬停框颜色和图像不透明度

jquery - 使用 Kendo 拖/放创建多选元素
我在这里有一个我想要做的事情的例子:http://jsbin.com/OwoYAlEQ/1/edit 这是我的 HTML: person one person two person three per
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl
WPF ListView 数据绑定(bind)拖/放自动滚动
我一直在使用 Bea 的解决方案 here一段时间后发现它非常有帮助。现在我遇到的问题是，当我将项目拖放到另一个 ListView 控件中或拖放到另一个 ListView 控件中，并且我想在拖动“期间
python - pyqt QTreeWidget setItemWidget 拖/放后消失
我试图在使用 QTreeWidget.setItemWidget() 重新父级(拖放)后将小部件放入 QTreeWidgetItem 但是，如果编译以下代码，结果是 QTreeWidgetItem 内
javascript - 拖/放问题(可拖动到位置 :relative parent)
这是场景，我使用的是prototype和scriptaculous，但我相信jquery也会有同样的问题。我在相对定位的 div 中有一个可拖动图像的列表。问题是我无法将图像拖出父 div...好吧.
带有表格主体/行扭曲宽度的 Angular CDK 拖/放列表(无 Material )
我正在使用一个普通(Bootstrap)表，我想在其中包含可排序的行。我正在使用 Angular CDK (DragDropModule) 来实现排序/排序。但是，当拖动行时，它会扭曲宽度，因为 cd
swift - 如何在 UICollectionView 拖/放过程中删除 'ghost' 单元格，并使移动单元格不透明？
我正在尝试在我的 UICollectionView 中实现拖放机制，这与在快捷方式应用程序中重新排序快捷方式的组件非常相似。截至目前，行为是当您开始拖动时，会留下一个透明的单元格 View ，而另一
Jquery UI 拖/放，一个 div 可以工作，另一个则不能。怎么修？
我有以下 Jquery UI 拖放 jsfiddle https://jsfiddle.net/zoojsfiddle/ud96jdcp/ 具有
javascript - 使用 Jquery 创建基于 Web 的 "bulletin board pin map"；拖/放/碰撞/等
我希望创建一个基于网络的“公告板”，可以这么说，用户可以在其中创建/删除/拖放“图钉”，而不允许重叠“图钉”。这是一个图表，应该有助于说明我正在尝试创建的内容: 'pins' 可能已创建双击；他们会

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 拖放 - 以表格格式保存元素被放置的位置