如何使用 jQuery 进行拖放以在两个或多个 div 之间移动数据，然后触发对 db 的更新？

Posted 2023-05-08

技术标签:

【中文标题】如何使用 jQuery 进行拖放以在两个或多个 div 之间移动数据，然后触发对 db 的更新？【英文标题】：How do I do a drag and drop using jQuery to move data between two or more divs and then trigger an update to the db on the drop? 【发布时间】：2021-08-21 21:24:27 【问题描述】：

如何使用 jQuery UI 进行拖放以在两个或多个 div 之间移动数据？

我正在使用 jQuery，它与 asp.net 核心 api 结合使用。

这本质上就像一个日历，能够在几天之间移动条目。

我看过的教程并没有完全涵盖我需要做什么。新的 div（或元素）将被动态创建，我无法让 drap/drop 在动态创建的 div 中工作，即使在将 droppable()/draggable() 应用于新元素之后也是如此。

我在模型中包含了下面的 html 页面和 css。该模型暂时不包含任何动态添加的元素以使其更简单。

模型中有一系列代表天数的 div。每天都包含可以移动到不同日期的事件项目。如果您想象一下，当连接到数据源时，星期一、星期二等会显示日期。

但首先，我需要帮助来了解如何在没有绝对定位的情况下获得当前必须工作的内容。

索引.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>

<body>
    <h1></h1>
    
    <div class='day' id='day1'>
        <h4>Monday</h4>
        <div id='3'>Breakfast</div>
        <div id='4'>Lunch</div>
        <div id='10'>Dinner</div>
    </div>
    <div class='day' id='day2'>
        <h4>Tuesday</h4>
        <div id='1'>Meeting with Jack</div>
        <div id='7'>Working lunch</div>
        <div id='8'>Phone call with Sarah</div>
        <div id='9'>Team meeting</div>
        <div id='12'>HR Review</div>
    </div>
    <div class='day' id='day3'>
        <h4>Wednesday</h4>
        <div id='5'>Progress update</div>
        <div id='6'>Call Simon</div>
    </div>
    <div class='day' id='day4'>
        <h4>Thursday</h4>
        <div id='2'>Drinks with Bob</div>
        <div id='11'>Weekly report</div>
    </div>
    <div class='day' id='day5'>
        <h4>Friday</h4>
        <div id='13'>Zoom meeting</div>
        <div id='14'>Email Jo</div>
        <div id='15'>Company Meal</div>
    </div>

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

            $('.day div').draggable(
                helper: 'clone',
                cursor: 'move'
            );

            $('.day').droppable(
                tolerance: 'pointer',
                drop: function (event, ui) 
                    var id = $(ui.draggable).attr('id');
                    var eventItem = $(ui.draggable).html();
                    var day = $(this).attr('id');

                    // Here's where am ajax call will go 

                    $(ui.draggable).remove();
                    $('#' + day).append('<div id="' + id + '">' + eventItem + '</div>');
                    $('div#' + id).draggable(
                        helper: 'clone',
                        cursor: 'move'
                    );
                    $(this).css('min-height', 'auto');

                
            );

        );
    </script>

</body>
</html>

css:

body 
    margin: 0;


h1 
    font-family: sans-serif;
    margin: 0;
    padding: 5px 0 5px 20px;
    color: white;
    height: 20px;


h2 
    font-family: sans-serif;
    margin: 0;
    padding: 10px 0 20px 20px;
    height: 25px;


h4 
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 5px 0px;
    border-bottom-color: dimgrey;
    border-bottom-width: 1px;
    border-bottom-style: solid;


div#left 
    margin-left: 40px;
    float: left;
    width: 220px;


div#center, div#right 
    float: left;
    width: 220px;
    margin-left: 50px;


ul, ol 
    list-style: none;
    border: 1px solid black;
    padding: 0;




li 
    padding: 0 10px;
    height: 25px;
    line-height: 25px;


    li:nth-child(odd) 
        background-color: #CCC;
    

    li:nth-child(even) 
        background-color: white;
    

    li:hover 
        cursor: move;
    


.box 
    min-height: 100px;
    height: auto;
    width: 100px;
    padding: 10px;
    border-width: 4px;
    border-style: solid;
    position: absolute;


.day 
    min-height: 100px;
    height: auto;
    width: 100px;
    padding: 10px;
    border-width: 4px;
    border-style: solid;
    position: absolute;


    .day div 
        background-color:  #00122f;
        padding-top: 2px;
        padding-bottom: 2px;
        margin-bottom: 5px;
        border-radius: 3px;
        padding-right: 1px;
        color: white;
        padding-left: 3px;
        
    

#day1 
    border-color: orange;
    left: 10px;
    top: 100px;
    width: 150px;


#day2 
    border-color: blue;
    left: 200px;
    top: 100px;
    width: 150px;


#day3 
    border-color: green;
    left: 390px;
    top: 100px;
    width: 150px;


#day4 
    border-color: red;
    left: 580px;
    top: 100px;
    width: 150px;


#day5 
    border-color: darkturquoise;
    left: 770px;
    top: 100px;
    width: 150px;


.instructions 
    color: red;



#reorder ul 
    margin-left: 20px;
    width: 200px;
    border: 1px solid black;
    list-style: none;
    padding: 0;


#reorder li 
    padding: 2px 20px;
    height: 25px;
    line-height: 25px;


#update-button, #update-message 
    height: 30px;
    margin-left: 20px;
    width: 200px;
    font-weight: bold;


ol.indexpage 
    margin-top: 30px;
    font-family: sans-serif;
    list-style: decimal;
    border: none;
    margin-left: 50px;


.indexpage li 
    border: none;
    background-color: white;

任何帮助表示赞赏。

【问题讨论】：

欢迎来到 Stack Overflow。请提供一个最小的、可重复的示例：***.com/help/minimal-reproducible-example 我没有任何代码 - 我无法找到说明如何执行此操作的教程。我正在尝试找出方法。你能提供你的表格的 HTML 输出吗？你应该有一些东西开始。您可能还想查看：jqueryui.com/sortable/#connect-lists 我已经用更多的细节和代码更新了帖子。 【参考方案1】：

考虑使用 Sortable。

jQuery UI Sortable 插件使选定的元素可以通过鼠标拖动进行排序。

这是一个基本的例子。

$(function() 
  $(".day").sortable(
    connectWith: ".day",
    cursor: "move",
    helper: "clone",
    items: "> div",
    stop: function(event, ui) 
      var $item = ui.item;
      var eventLabel = $item.text();
      var newDay = $item.parent().attr("id");
      
      console.log($item[0].id, eventLabel, newDay);

      // Here's where am ajax call will go
      
    
  ).disableSelection();
);

body 
  margin: 0;


h1 
  font-family: sans-serif;
  margin: 0;
  padding: 5px 0 5px 20px;
  color: white;
  height: 20px;


h2 
  font-family: sans-serif;
  margin: 0;
  padding: 10px 0 20px 20px;
  height: 25px;


h4 
  margin: 0px 0px 5px 0px;
  padding: 0px 0px 5px 0px;
  border-bottom-color: dimgrey;
  border-bottom-width: 1px;
  border-bottom-style: solid;


div#left 
  margin-left: 40px;
  float: left;
  width: 220px;


div#center,
div#right 
  float: left;
  width: 220px;
  margin-left: 50px;


ul,
ol 
  list-style: none;
  border: 1px solid black;
  padding: 0;


li 
  padding: 0 10px;
  height: 25px;
  line-height: 25px;


li:nth-child(odd) 
  background-color: #CCC;


li:nth-child(even) 
  background-color: white;


li:hover 
  cursor: move;


.box 
  min-height: 100px;
  height: auto;
  width: 100px;
  padding: 10px;
  border-width: 4px;
  border-style: solid;
  position: absolute;


.day 
  min-height: 100px;
  height: auto;
  width: 100px;
  padding: 10px;
  border-width: 4px;
  border-style: solid;
  position: absolute;


.day div 
  background-color: #00122f;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 5px;
  border-radius: 3px;
  padding-right: 1px;
  color: white;
  padding-left: 3px;


#day1 
  border-color: orange;
  left: 10px;
  top: 100px;
  width: 150px;


#day2 
  border-color: blue;
  left: 200px;
  top: 100px;
  width: 150px;


#day3 
  border-color: green;
  left: 390px;
  top: 100px;
  width: 150px;


#day4 
  border-color: red;
  left: 580px;
  top: 100px;
  width: 150px;


#day5 
  border-color: darkturquoise;
  left: 770px;
  top: 100px;
  width: 150px;


.instructions 
  color: red;


#reorder ul 
  margin-left: 20px;
  width: 200px;
  border: 1px solid black;
  list-style: none;
  padding: 0;


#reorder li 
  padding: 2px 20px;
  height: 25px;
  line-height: 25px;


#update-button,
#update-message 
  height: 30px;
  margin-left: 20px;
  width: 200px;
  font-weight: bold;


ol.indexpage 
  margin-top: 30px;
  font-family: sans-serif;
  list-style: decimal;
  border: none;
  margin-left: 50px;


.indexpage li 
  border: none;
  background-color: white;

<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>
<h1></h1>

<div class='day' id='day1'>
  <h4>Monday</h4>
  <div id='3'>Breakfast</div>
  <div id='4'>Lunch</div>
  <div id='10'>Dinner</div>
</div>
<div class='day' id='day2'>
  <h4>Tuesday</h4>
  <div id='1'>Meeting with Jack</div>
  <div id='7'>Working lunch</div>
  <div id='8'>Phone call with Sarah</div>
  <div id='9'>Team meeting</div>
  <div id='12'>HR Review</div>
</div>
<div class='day' id='day3'>
  <h4>Wednesday</h4>
  <div id='5'>Progress update</div>
  <div id='6'>Call Simon</div>
</div>
<div class='day' id='day4'>
  <h4>Thursday</h4>
  <div id='2'>Drinks with Bob</div>
  <div id='11'>Weekly report</div>
</div>
<div class='day' id='day5'>
  <h4>Friday</h4>
  <div id='13'>Zoom meeting</div>
  <div id='14'>Email Jo</div>
  <div id='15'>Company Meal</div>
</div>

Sortable 结合了拖放元素并允许连接列表。因此，可以将周一的项目拖到一周中的任何一天，反之亦然。

【讨论】：

谢谢。是否可以对具有自己 s 的不同 div 中的元素执行相同的方法？可以。这是默认项目。

以上是关于如何使用 jQuery 进行拖放以在两个或多个 div 之间移动数据，然后触发对 db 的更新？的主要内容，如果未能解决你的问题，请参考以下文章

拖放以重新排序 HTML 列表

如果没有放在目标上，则使用 onDraglistener animate 拖放以返回原始位置

禁用 WebView 的拖放以支持其超级视图之一

HTML5拖放以将div移动到屏幕上的任何位置？

如何拖放 recyclerView 元素？

使用 %1 进行拖放的批处理文件复制