Skip to content

All topics  /  jQuery

Jquery UI Sortable List Example

jQuery ·

When “Jquery UI Sortable List Example” moves through design, development and browser testing, the linked implementation guide can clarify hand-offs and time spent on revisions while leaving code quality, accessibility and released behaviour as the real measures of success.

For API changes, browser support and current usage patterns, compare the snippet with the official jQuery website before adopting it in production.

Hi guys

This article is focused on jquery ui sortable list example . it's simple example of sortable list example using jquery ui. you can see example of jquery ui tabs with subtabs. this example will help you jquery ui using create sortable list.

In this example,I will exaplain how to create jquery ui sortable list. I will show jquery ui sortable list example.We will make sortable list using jquery ui.you can easy to create jquery ui sortable list.

Here the example of jquery ui sortable list.

Example


Now this jquery ui sortable list html design code:

Jquery UI sortable list for layout 

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Jquery UI Sortable List Example - nicesnippets.com</title>
  <script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/miguelsolorio/pen/WxXmOZ?limit=all&page=57&q=draggable" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
</head>
<body>
<div class="container">
 <div class="col">
  <p class="title">Proposed</p>
  <div class="cards">
   <ul id="col1" class="draggable">
    <li id="c1">"Add Card" control on taskboard and kanban board</li>
    <li id="c2">"Change application access policies"</li>
    <li id="c3">Update policy to add personal access tokens for 3rd-party apps</li>
    <li id="c4">"Load test in the cloud": Run cloud-based load tests</li>
  </ul>
</div>
</div>
<div class="col">
  <p class="title">Committed</p>
  <div class="cards">
   <ul id="col2" class="draggable">
    <li id="c5">.NET Client API for Standards Repository</li>
    <li id="c6">[@mentions] Adopt account wide MRU @mentioning of people</li>
    <li id="c7">[@mentions] Email Alerts for @mentions</li>
  </ul>
</div>
</div>
<div class="col">
  <p class="title">In Progress</p>
  <div class="cards">
   <ul id="col3" class="draggable">
    <li id="c8">[@mentions] Email Alerts for @mentions</li>
    <li id="c9">[@mentions] People mentions rendering</li>
    <li id="c10">[Admin] User prompted delete account</li>
    <li id="c11">[Archive Library] MTPS</li>
    <li id="c12">[Archive Library] MTPS - S84</li>
    <li id="c13" class="hide">[Archive Library] Rendering: Hide archived library content in TOC and add disclaimer</li>
    <li id="c14" class="hide">[Dev14] Team room bug & infrastructure debt</li>
    <li id="c15" class="hide">[Dev14] Team room bug & infrastructure debt</li>
    <li id="c16" class="hide">[Dev14] Turn off teamroom enter/exit messages</li>
    <li id="c17" class="hide">[DRI/LSR] S81 Customer / Live Site Issues</li>
    <li id="c18" class="hide">[DRI/LSR] S82 Customer / Live Site Issues</li>
  </ul>
  <p class="loadMore">
   <a href="#">Load more</a>
  </p>
  </div>
  </div>
 </body>
</html>

Jquery UI sortable list for Css

Blow this jquery ui sortable list css design code: 

<style class="cp-pen-styles">
  body {
  font-family: Segoe UI, Helvetica Neue, Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  color: #222;
}
.container {
  width: 975px;
  padding-top: 40px;
  margin: 0 auto;
  display: flex;
}
.col {
  width: 325px;
  margin-right: 10px;
}
.title {
  margin: 0;
  padding-bottom: 10px;
  font-size: 14px;
  border-bottom: 2px solid #c6c6c6;
}
.cards {
  margin: 0;
  padding: 10px;
  min-height: 500px;
  height: 100%;
  list-style-type: none;
  background-color: #f1f1f1;
}
.cards ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cards li {
  z-index: 1;
  margin-bottom: 10px;
  padding: 10px;
  background-color: white;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 4px solid #009ccc;
}
.loadMore {
  opacity: 1 !important;
  background-color: transparent;
  border: none;
  padding: 8px 6px;
}
.loadMore a {
  color: #006FCD;
}
.hover {
  background-color: #d4e5f5;
}
.highlight {
  min-height: 18px;
  border: 1px dashed #9E9E9E !important;
  background-color: transparent !important;
}
@-webkit-keyframes animateLoadMore {
  0% {
    opacity: 0.5;
  }
  33% {
    opacity: 0;
  }
  66% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.animateLoadMore {
  background-color: #d4e5f5;
  -webkit-animation: animateLoadMore 0.3s infinite;
  -moz-animation: animateLoadMore 0.3s infinite;
  -o-animation: animateLoadMore 0.3s infinite;
  animation: animateLoadMore 0.3s infinite;
}
</style>

Jquery UI sortable list for script

Now the jquery ui sortable list script code add: 

<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/496929/js/jquery-collision.min.js'></script>
<script src='https://dl.dropboxusercontent.com/u/496929/js/jquery-ui-draggable-collision.js'></script>
<script >
 var obj = '#col1,#col2,#col3',
    timer;
function loadMore(){
  $('.loadMore').addClass('animateLoadMore');
  setTimeout(function(){
    $('.loadMore').removeClass('animateLoadMore').hide();
    $('.hide').show().removeClass('hide');
    $(obj).sortable('refresh');
  }, 600)
}
$(obj + ', .cards').sortable({
  connectWith: '.draggable,.cards',
  placeholder: 'highlight',
  opacity: 0.5,
  revert: true,
  start(event,ui){
    $(obj).sortable('refresh');
  },
  over(event,ui){
    $(this).parent().find('.cards').addClass('columnHover');
  },
  out(event,ui){
    $(this).parent().find('.cards').removeClass('columnHover');
  }
}).disableSelection();
$('.loadMore').droppable({
  hoverClass: 'hover',
  over(event, ui){
    console.log('Over!')
    if (!timer) {
      timer = window.setTimeout(function() {
        timer = null;
        loadMore();
      }, 300);
    }
  },
  out(event, ui){
    window.clearTimeout(timer);
    timer = null;
  }
});
$('.hide').hide();
$('.loadMore').click(function(){
  $('.hide').show().removeClass('hide');
  $(this).hide();
});
//# sourceURL=pen.js
</script>

It will help you...

More on this topic