javascript - Moving items around in a queue - Code Review Stack Exchange

what i'm trying achieve here sort queue of .item-dragable between different lists. users can click on right , left arrows , items move in queue respectively, previous or next item gets placed in place of item moved. there placeholder element should not counted valid sortable, there checks ignore it. if item in last list , moved right, moves first list. if in first list , gets moved left moves last list (last item in last list, first item in first list).

the first thing came mind switch statements, can't figure out way implement them in case, each check unique. please provide alternative or let me know if there other better way using many if / else statements in case?

there more bits code find correct adjacent lists, re initiate stuff etc., adding these in make question lengthy.

if ( (item.is(':last-child') || item.next().hasclass('item-dragable-placeholder') ) && direction == "right") {         var itemlistadjtmp = itemlistadj.find('.item-dragable').first(),             itempartner;         if(itemlist.find('.item-dragable').length <= 1) {             itempartner = item.next('li');             item.insertbefore(itemlistadjtmp);             itemlistadjtmp.insertbefore(itempartner);          } else {             itempartner = item.prev('.item-dragable');             item.insertbefore(itemlistadjtmp);             itemlistadjtmp.insertafter(itempartner);         }     }      else if (!item.is(':last-child') && !item.next().hasclass('item-dragable-placeholder') && direction == "right") {         item.insertafter(item.next('.item-dragable'));     }     else if (item.is(':first-child') && direction == "left") {         var itemlistadjtmp = itemlistadj.find('.item-dragable').last(),             itempartner;         if(itemlist.find('.item-dragable').length <= 1) {             itempartner = item.next('li');             item.insertafter(itemlistadjtmp);             itemlistadjtmp.insertbefore(itempartner);          } else {             itempartner = item.next('.item-dragable');             item.insertafter(itemlistadjtmp);             itemlistadjtmp.insertbefore(itempartner);         }     }     else if (!item.is('first-child') && direction == "left") {         item.insertbefore(item.prev('.item-dragable'));     } 

example markup:

<li class="queue-month">                 <h3>november</h3>                 <ol class="clearfix sortable-queue-month">                     <li class="item-dragable" data-position="4">                         <a href="#" class="remove" title="remove item">remove item</a>                         <img src="..." alt="socks outline">                         <span class="drag-indicator">drag</span>                         <div class="sort-indicator-mobile">                             <a href="#" class="sort-left">sort left</a>                             <a href="#" class="sort-right">sort right</a>                         </div>                     </li>                     <li class="item-dragable" data-position="5">                         <a href="#" class="remove" title="remove item">remove item</a>                         <img src="..." alt="socks outline">                         <span class="drag-indicator">drag</span>                         <div class="sort-indicator-mobile">                             <a href="#" class="sort-left">sort left</a>                             <a href="#" class="sort-right">sort right</a>                         </div>                     </li>                     <li class="item-dragable" data-position="5">                         <a href="#" class="remove" title="remove item">remove item</a>                         <img src="<?= cdn ?>img/png/sock-placeholder.png" alt="socks outline">                         <span class="drag-indicator">drag</span>                         <div class="sort-indicator-mobile">                             <a href="#" class="sort-left">sort left</a>                             <a href="#" class="sort-right">sort right</a>                         </div>                     </li>                 </ol>             </li>              <li class="queue-month">                 <h3>november</h3>                 <ol class="clearfix">                     <li class="item-dragable-placeholder">                         <a href="#" class="add-surprise-item" data-image="<?= cdn ?>img/png/sock-placeholder.png">surprise me</a>                     </li>                 </ol>             </li> 

you can split "left" , "right"

kind of hard explain, show code have rewritten

if ( direction == "right" ) {     if (item.is(':last-child') || item.next().hasclass('item-dragable-placeholder')) {         var itemlistadjtmp = itemlistadj.find('.item-dragable').first(),             itempartner;         if(itemlist.find('.item-dragable').length <= 1) {             itempartner = item.next('li');             item.insertbefore(itemlistadjtmp);             itemlistadjtmp.insertbefore(itempartner);         } else {             itempartner = item.prev('.item-dragable');             item.insertbefore(itemlistadjtmp);             itemlistadjtmp.insertafter(itempartner);         }     } else {         item.insertafter(item.next('.item-dragable'));     } } else {     if (item.is(':first-child')) {         var itemlistadjtmp = itemlistadj.find('.item-dragable').last(),             itempartner;         if(itemlist.find('.item-dragable').length <= 1) {             itempartner = item.next('li');             item.insertafter(itemlistadjtmp);             itemlistadjtmp.insertbefore(itempartner);         } else {             itempartner = item.next('.item-dragable');             item.insertafter(itemlistadjtmp);             itemlistadjtmp.insertbefore(itempartner);         }     } else {         item.insertbefore(item.prev('.item-dragable'));     } } 

to dry out want split code right , left

this solution adds if statement, removes duplicate conditions throughout code. solution stops else if statements being run if direction == "left" skips "right" stuff.

---

to further dry code , keep repeating much, pointed out me that

item.insertafter(itemlistadjtmp); itemlistadjtmp.insertbefore(itempartner); 

is being repeated on left side. looked @ if/else structure make sure wouldn't change logic if took them out, , performing 1 or other no matter take bit of code out of if/else block , don't have repeat it.

so looks else statement

} else {     if (item.is(':first-child')) {         var itemlistadjtmp = itemlistadj.find('.item-dragable').last(),             itempartner;         if(itemlist.find('.item-dragable').length <= 1) {             itempartner = item.next('li');         } else {             itempartner = item.next('.item-dragable');         }         item.insertafter(itemlistadjtmp);         itemlistadjtmp.insertbefore(itempartner);     } else {         item.insertbefore(item.prev('.item-dragable'));     } }