我如何使用jQuery進行拖放，在兩個或多個div之間移動資料，然后觸發對db的更新？ -有解無憂

我如何使用jQuery UI進行拖放操作，在兩個或多個div之間移動資料？

我正在使用jQuery，這是與asp.net core api相結合的。

這本質上就像一個日歷，能夠在不同的日子里移動條目。

我所看的教程并沒有涵蓋我需要做的事情。新的 Div（或元素）將被動態創建，而我一直無法讓 drap/drop 在動態創建的 div 中發揮作用，即使在對新元素應用 droppable()/draggable() 后也是如此。

我在下面列出了 html 頁面和 css 的模擬。該模型不包括任何動態添加的元素，以使其暫時保持簡單。

在模擬頁面中，有一系列的div，代表著日期。每一天都包含可以移動到不同日期的事件專案。如果你想象一下，當連接到一個資料源時，它所顯示的星期一、星期二等將顯示日期。

但首先，我需要幫助理解我如何在沒有絕對定位的情況下讓我目前擁有的東西發揮作用。

Index.html:

<! DOCTYPEhtml>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="styleheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></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>星期一</h4>
        <div id='3'>早餐</div>
        <div id='4'>午餐</div>
        <div id='10'>晚餐</div>
    </div>
    <div class='day' id='day2'>
        <h4>星期二</h4>
        <div id='1'>與杰克會面</div>
        <div id='7'>作業午餐</div>
        <div id='8'>與Sarah通電話</div>
        <div id='9'>團隊會議</div>
        <div id='12'>人力資源回顧</div>
    </div>
    <div class='day' id='day3'>
        <h4>星期三</h4>
        <div id='5'>進度更新</div>
        <div id='6'>給西蒙打電話</div>
    </div>
    <div class='day' id='day4'>
        <h4>星期四</h4>
        <div id='2'>與鮑勃喝酒</div>
        <div id='11'>每周報告</div>
    </div>
    <div class='day' id='day5'>
        <h4>周五</h4>
        <div id='13'>放大會議</div>
        <div id='14'>Email Jo</div>
        <div id='15'>公司聚餐</div>
    </div>

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

            $('.day div').dragable({
                helper: 'clone',
                游標。'移動
            });

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

                    // 這里是Ajax呼叫的地方 

                    $(ui.dragable).remove()。
                    $('#'   day).append('<div="'   id   '">'   eventItem   '</div> ')。
                    $('div#'   id).dragable({
                        helper: 'clone',
                        cursor: '移動
                    });
                    $(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;
    高度: 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: dimg灰色。
    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: 綠色。
    left: 390px;
    top: 100px;
    width: 150px;
}

#day4 {
    border-color: 紅色。
    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;
    高度: 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: 十進制。
    border: none;
    margin-left: 50px;
}

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

希望得到任何幫助。

uj5u.com熱心網友回復：

考慮使用Sortable.

jQuery UI Sortable插件使選定的元素可以通過滑鼠拖動進行排序。

下面是一個基本的例子。

。

$(function() {
  $(".day"/span>).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: dimg灰色。
  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: 綠色。
  left: 390px;
  top: 100px;
  width: 150px;
}

#day4 {
  border-color: 紅色。
  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: 十進制。
  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'/span>> 早餐</div>。
  <div id='4'/span>> 午餐</div>。
  <div id='10'/span>> 晚餐</div>。
</div>/span>
< div class='day' id='day2'>
  <h4>Tuesday</h4>
  <div id='1'/span>> 與杰克會面</div>>
  <div id='7'/span>> 作業午餐</div>。
  <div id='8'/span>> 與Sarah的電話</div>。
  <div id='9'/span>> 團隊會議</div> 
  <div id='12' > HR回顧</div>>
</div>/span>
< div class='day' id='day3'>
  <h4>Wednesday</h4>
  <div id='5'/span>> 進度更新</div> 
  <div id='6'/span>> 呼叫Simon</div>>
</div>/span>
< div class='day' id='day4'>
  <h4>Thursday</h4>
  <div id='2'/span>> 與Bob一起喝酒</div>>
  <div id='11'/span>> 每周報告</div>>
</div>/span>
< div class='day' id='day5'>
  <h4>周五</h4> 
  <div id='13'/span>> 放大會議</div>>
  <div id='14'/span>> Email Jo</div>。
  <div id='15'/span>> 公司餐</div>>
</div>

Sortable結合了拖放元素，并允許串列被連接。因此，周一的專案可以被拖到一周的任何一天，反之亦然。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/319943.html

標籤：

上一篇：jQueryUI小部件在最小化后停止作業

下一篇：TinyMCE編輯器不顯示在JQueryUI對話框內