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

Question

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

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

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

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

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

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

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

Index.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;
}

感谢任何帮助。

Answer 1

考虑使用 Sortable。

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

这是一个基本示例。

$(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 结合了拖放元素并允许连接列表。因此可以将星期一的项目拖到一周中的任何一天，反之亦然。

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

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?

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable