How to make textareas sortable? do i have to put textareas inside lis?-CodePudding

Here is my jquery:

$(".time-block .listgroup").sortable({
    connectWith: $(".time-block .listgroup"),
    items: "> textarea",
    placeholder: "highlight",
    //helper: "clone",
    update: function(event){
    var changeArr= []
    $(this).each(function(){
        changeArr.push({
            text: $(this)
            .children()
            .find("textarea")
            .val()
        })
    })
    // update on localstorage object and save and get on page refresh
    saveEvent()
    }
})

Here is what the html looks like:

<div >
    <!-- Timeblocks go here-->
    <div class ="time-block"> 
      <div class ="hour" id="9"> 9 AM</div>
      <ul class= "listgroup"> 
        <textarea name="" id="" cols="80" rows="5"></textarea>
      </ul>
      <button class ="saveBtn"><i ></i></button>
    </div>
    <div class ="time-block">
      <div class ="hour" id="10"> 10 AM</div>
      <ul class= "listgroup">
        <textarea name="" id="" cols="80" rows="5"></textarea>
      </ul>
      <button class ="saveBtn"><i ></i></button>
    </div>

I believe I put the appropriate CDNs at the bottom of the body:

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.ui.touch-punch.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="assets/script.js"></script>
</body>

I'm a beginner trying to experiment with different functionalities and I don't really understand what is going wrong here. Appreciate the help in advance.

CodePudding user response：

The

$(function () {
    $('#container').sortable({
        placeholder: "ui-state-highlight",
        helper: 'clone'
    });
})

#container {
    margin-left: 300px;
    margin-top: 100px;
    position: relative;
}

.newStep {
    cursor: pointer;
    float: right;
    font-size: 10px;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: -12px;
    margin-top: 0 !important;
    padding: 3px 7px;
    width: 80px !important;
}

.step {
    border-top-left-radius: 0 !important;
    font-family: lucida Grande;
    margin: 4px;
}

.stepNumber {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    left: -20px;
    padding: 10px;
    position: absolute;
    top: 3px;
}

.inset {
    color: white;
    background: none repeat scroll 0 0 #000000;
    border-radius: 5px;
}

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Sortable - Default functionality</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
</head>

<body>
    <div style="float:left; clear:both;" id="container">
        <div style="position: relative;" >
            <span >1</span>
            <textarea placeholder="1 A.M." name="" id="" cols=100   style="margin-left: 10px;"></textarea>
        </div>

        <div style="position: relative;" >
            <span >2</span>
            <textarea placeholder="2 A.M." name="" id="" cols=100   style="margin-left: 10px;"></textarea>
        </div>

        <div style="position: relative;" >
            <span >3</span>
            <textarea placeholder="3 A.M." name="" id="" cols=100   style="margin-left: 10px;"></textarea>
        </div>
    </div>
</body>
</html>

References

_{jQuery Sortable Post}

CodePudding user response：

Consider the following based on the Demo: Sortable | jQuery UI | Include / exclude Items.

$(function() {
  function toArray(sort) {
    var results = [];
    $("li", sort).each(function(i, el) {
      if ($(el).hasClass("hour")) {
        results.push({
          hour: $(el).attr("id"),
          details: $(el).next().find("textarea").text()
        });
      }
    });
    return results;
  }

  function saveEvent(string) {
    //localStorage.setItem("hours", string);
    console.log("Saving", string);
  }

  $(".time-blocks").sortable({
    cancel: ".hour",
    handle: ".fa-grip-lines-vertical",
    update: function(event) {
      saveEvent(JSON.stringify(toArray(this)));
    }
  });
});

.time-blocks {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

.time-blocks .ui-widget-header {
  padding-left: 1.5em;
}

.time-blocks textarea {
  width: calc(100% - 50px);
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<div >
  <!-- Timeblocks go here-->
  <ul >
    <li  id="9">
      <div >9 AM</div>
    </li>
    <li >
      <div >
        <i ></i>
        <textarea rows="5">Details 1</textarea>
        <button ><i ></i></button>
      </div>
    </li>
    <li  id="10">
      <div >
        <div >10 AM</div>
      </div>
    </li>
    <li >
      <div >
        <i ></i>
        <textarea rows="5">Details 2</textarea>
        <button ><i ></i></button>
      </div>
    </li>
    <li  id="11">
      <div >
        <div >11 AM</div>
      </div>
    </li>
    <li >
      <div >
        <i ></i>
        <textarea rows="5">Details 3</textarea>
        <button ><i ></i></button>
      </div>
    </li>
  </ul>
</div>

You have one primary list. Each List Item has either Hours or Details. We exclude (cancel) the Hours and only worry about sorting the details into Hours.

Since this does not align well, we need a function that can combine the data. This combines the relative data so that we get an Array of Object where the Hours relate to the Details.

Sortable may not be best for this since I suspect you7 only want 1 textarea per hour. There is a chance the User may drag one into another.