CODEWITHSUNDEEP
javascript
gentlebreeze
gentlebreeze

Reputation: 31

Moving the order of screen items with a mouse click

On my screen I have a simple list of items:

  1. item 1
  2. item 2
  3. item 3

I have seen examples of where the user can click on an item and change its position in the list with the mouse.

Mu question is, how is this done? Is it a javascript function of sorts?

Upvotes: 0

Views: 37

Answers (2)

Husni Salax
Husni Salax

Reputation: 2020

Moving the order of screen items with a mouse click

Try this: jqueryui sortable

Hope it helps

Upvotes: 0

Arun Sharma
Arun Sharma

Reputation: 1331

You can use jQuery Ui library to accomplish this easily. Follow this snippet

  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { background:#aeaeae; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 

  <script>
  $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });
  </script>

 
<ul id="sortable">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
</ul>

Upvotes: 1

Related Questions