微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

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

分类：编程问答

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

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

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

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

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

我已经在模型中包含了下面的 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;
}

感谢任何帮助。

解决方法

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

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot