Title menu that can be both dragged and edited

Question

Title menu that can be both dragged and edited

I am currently working on developing an HTML user interface that enables my users to rearrange or organize the menu items or utilities according to their preference, much like the HOME screens on Android or iOS devices. I am seeking advice on how I can save the positions of the menus?

$(function() {
  $("#items").sortable({
    placeholder: "highlight",
    start: function(event, ui) {
      ui.item.toggleClass("highlight");
    },
    stop: function(event, ui) {
      ui.item.toggleClass("highlight");
    }
  });
  $("#items").disableSelection();
});

.list {
  background-color: #478BFF;
  font-size: 30px;
  text-align: center;
  cursor: pointer;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  border: 1px solid gray;
}

#items .ui-selected {
  background: red;
  color: white;
  font-weight: bold;
}

#items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#items li {
  float: left;
  margin: 2px;
  padding: 2px;
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.highlight {
  border: 1px solid red;
  font-weight: bold;
  font-size: 45px;
  background-color: lightblue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div style="width:520px">
  <ul id="items">
    <li class="list">1</li>
    <li class="list">2</li>
    <li class="list">3</li>
    <li class="list">4</li>
    <li class="list">5</li>
    <li class="list">6</li>
    <li class="list">7</li>
    <li class="list">8</li>
    <li class="list">9</li>
    <li class="list">10</li>
    <li class="list">11</li>
    <li class="list">12</li>
    <li class="list">13</li>
    <li class="list">14</li>
    <li class="list">15</li>
    <li class="list">16</li>
    <li class="list">17</li>
    <li class="list">18</li>
    <li class="list">19</li>
    <li class="list">20</li>
    <li class="list">21</li>
    <li class="list">22</li>
    <li class="list">23</li>
    <li class="list">24</li>
    <li class="list">25</li>
    <li class="list">26</li>
    <li class="list">27</li>
    <li class="list">28</li>
  </ul>
</div>
<div id="info" style="font-family:Geneva,Arial,Helvetica,sans-serif;font-size:20px;"></div>

jquery html css

Answer 1

Answer №1

Utilizing a straightforward .map() function will retrieve the current positions of each item:

function fetch() {
  let positions = $.map(
    $('#items li'), 
    function(i){
      return parseInt($(i).text())
    });
  console.log(positions);
}

fetch();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:520px">
  <ul id="items">
      <li class="list">1</li>
      <li class="list">2</li>
      <li class="list">3</li>
      <li class="list">4</li>
      <li class="list">5</li>
      <li class="list">6</li>
      <li class="list">7</li>
      <li class="list">8</li>
      <li class="list">9</li>
      <li class="list">10</li>
      <li class="list">11</li>
      <li class="list">12</li>
      <li class="list">13</li>
      <li class="list">14</li>
      <li class="list">15</li>
      <li class="list">16</li>
      <li class="list">17</li>
      <li class="list">18</li>
      <li class="list">19</li>
      <li class="list">20</li>
      <li class="list">21</li>
      <li class="list">22</li>
      <li class="list">23</li>
      <li class="list">24</li>
      <li class="list">25</li>
      <li class="list">26</li>
      <li class="list">27</li>
      <li class="list">28</li>
  </ul>
</div>

In order to execute this code upon button click instead of page load, and to prevent naming conflicts, consider binding it accordingly and providing a distinct name.

Note: When needing to assign a common class to all children within a parent element, removing individual classes from items and styling them via the parent is often a better approach. For instance:

<ul id="items">
  <li>1</li>
  <li>2</li>
  ...
</ul>

You can apply styles to the <li>s with #items>li{ ... } rather than using #items .list{ ... }

Answer 2

Utilizing a straightforward .map() function will retrieve the current positions of each item:

function fetch() {
  let positions = $.map(
    $('#items li'), 
    function(i){
      return parseInt($(i).text())
    });
  console.log(positions);
}

fetch();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:520px">
  <ul id="items">
      <li class="list">1</li>
      <li class="list">2</li>
      <li class="list">3</li>
      <li class="list">4</li>
      <li class="list">5</li>
      <li class="list">6</li>
      <li class="list">7</li>
      <li class="list">8</li>
      <li class="list">9</li>
      <li class="list">10</li>
      <li class="list">11</li>
      <li class="list">12</li>
      <li class="list">13</li>
      <li class="list">14</li>
      <li class="list">15</li>
      <li class="list">16</li>
      <li class="list">17</li>
      <li class="list">18</li>
      <li class="list">19</li>
      <li class="list">20</li>
      <li class="list">21</li>
      <li class="list">22</li>
      <li class="list">23</li>
      <li class="list">24</li>
      <li class="list">25</li>
      <li class="list">26</li>
      <li class="list">27</li>
      <li class="list">28</li>
  </ul>
</div>

In order to execute this code upon button click instead of page load, and to prevent naming conflicts, consider binding it accordingly and providing a distinct name.

Note: When needing to assign a common class to all children within a parent element, removing individual classes from items and styling them via the parent is often a better approach. For instance:

<ul id="items">
  <li>1</li>
  <li>2</li>
  ...
</ul>

You can apply styles to the <li>s with #items>li{ ... } rather than using #items .list{ ... }

Title menu that can be both dragged and edited

Answer №1

Similar questions

Having trouble transferring a PHP string to jQuery

The issue with the Timber Ajax-cart drawer is that it fails to update the quantity of added or removed products

Troubleshooting issues with drawing images on HTML5 canvas: experiencing unexpected outcomes

Guide to finding the parent component of a particular element?

Placing text and an image within a grid cell does not automatically stack them on top of each other

Is the rotate() method in SVG supported on web browsers when passing in additional parameters like angle, centerX, and centerY similar to the CSS rotate

A crisscrossing dashed design running along the edges of the text block

The jQuery AJAX function executing twice upon click

Use a PHP form to send an email with HTML formatting, rather than plain text

Is there a way to modify the background color with Bootstrap?

Having trouble with Angular UI Select functionality?

How to conceal table cells on Safari 5?

Exploring the combination of PHP and HTML through conceptual sessions

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

The Ajax request fails to trigger the success function following the JsonResult response

I attempted various methods but was unable to successfully call the webmethod in the code behind using jQuery Ajax and Knockout

When I scroll and update my webpage, the navigation header tends to lose its distinct features. This issue can be resolved

When clicking on an HTML link pointing to a cloud, it does not open in the same frame but instead opens in a new window

Accessing a variable outside of the function call in AngularJS is not possible

Is there a way to display a div element just once in AngularJS?