Add reorder select list lib
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

We are using this lib for a project

http://loudev.com/#home

but need the ability to reorder or drag position for the selected items on the right. This bounty is to allow for the items on right to be ordered so we can save this state back to the server. Ideally when I hover on the right I can have some sort of drag handle pattern so i know which part is draggable.

hi, instead of adding this feature to that lib, could it possible, to use another library, that already support the sortable, and draggable actions, so we only, simulate the onclick action, to move from left to right. i'm just asking a question if this lib is required or not.
Chlegou 5 months ago
Normally i would say yes but we have this one working in a legacy angular1.x app and have a bunch of custom code around it so unfortunately we cant this time around.
Qdev 5 months ago
ah ok, i will look for it to modify that library ;)
Chlegou 5 months ago
@Qdev, @kostasx is getting it right, but i have another view of it. i will submit my solution in a bit
Chlegou 5 months ago
awarded to Wuddrum

Crowdsource coding tasks.

7 Solutions


A quick solution to your problem using the library you already have:
Use the keepOrder option. Users will be able to adjust order by clicking items.
See http://loudev.com/#demos and scroll to Keep Order
Although this is not an ideal solve I believe it should be a short term solution. You will likely have to change libraries for different and better functionality.

Example $('#keep-order').multiSelect({ keepOrder: true });
lumbb 5 months ago
As @Chlegou commented, because you can't change libraries you'll have to modify your existing one.
lumbb 5 months ago

I am using a 1KB solution for the sortable list.
You can check it out here:
https://codepen.io/kostasx/pen/pKZXZx

The items on the right list are draggable. I can work on a drag icon if you like.

This is the library:
http://farhadi.ir/projects/html5sortable/


I made up a solution with a fork of the same plugin, using a light version of jqueryUI (just the necessary since jqueryUI lets you build a light version of the necessary stuff for a function to work, so i could use the sortable function).

https://github.com/enderdba/multi-select

example: https://enderdba.github.io/multi-select/

What are the changes?

In the fork, a light version of JqueryUI was commited, so i could use the sortable function.
In the main javascript file for the multi-select, there's a change that makes the last cloned UL (the selection one) sortable, that means only the right table elements are draggable. Also, every LI element has preppended a glyphicon so it makes a handle for the draggable function.

You need to import the min.js from jqueryUI so it can work, otherwhise you'll have an error that the sortable function is not declared

Check out the sample and tell me if you need anything!

Oh, you can use Jquery selection so you can get an ordered list of values for each <li> element and save the actual state to the server parsing the elements.

$(".ms-selection ul li.ms-selected") to get a list of selected elements in the right.


Hi there,

the solution that i have in mind, from first sight was either adding the htmlSortable in it which is the same idea that @kostasx worked at.

html sortable is a light weight solution, and a powerful one, i believe is powerful for small projects.

as you mentioned, you want to add a drag handler, doing that, you will interfere, with the select handler of the multiselect, this is obvious in the solution of @enderbda.

also, it's not UX friendly. so to acheive that, i modified the loodev lib by adding the dragger button, and another "X" button, so you can delete items with it.

it's strongly recommended in UX

solution: https://jsfiddle.net/1b8wpxay/2/

code in github: https://github.com/chlegou/addSortableToLoodevLib

solution in github: https://chlegou.github.io/addSortableToLoodevLib/

as i said, thinking of user experience UX, the delete button should be required.


Here's my go at the problem using Sortable with a slightly modified multiselect.js (to add drag handle):

Codepen.io.

If you'd like for handles to be on the right side, you can simply add float: right; and remove margin-right: 0.5em; from the handle class, or click here for a preview.

Sortable is a 15kb library for modern browsers with click and touch support (but also includes a fallback for browsers that don't support drag & drop).

It offers more features than libraries used it previous solutions, for example - scrolling speed and sensitivity can be configured, to make sorting a much more pleasant experience in lists with a lot of items.

It also includes a configurable sorting animation, that I've included in my solution. To remove it, you can simply remove animation: 200 or check out my solution without animations.

+ lots of other features you can check out on the Sortable page.

As for UX issues, I don't agree with @Chlegou solution. If it's intuitive for the user to add an item to the list by clicking anywhere on the item, then it's as intuitive to remove it by clicking anywhere on the item.

I'd say a proper UX friendly solution with a dedicated button for removing an item from the list would require a dedicated button for adding it to the list in the first place.

EDIT: This would be a more UX friendly solution if there's a need for additional buttons: Codepen.io

EDIT2: Here's a better looking alternative for solution with add/remove buttons: Codepen.io

EDIT3: If you prefer a smaller library with less function, I've adapted my solutions to a library that's based on one that @kostasx is using, but an actively maintained fork.

Handle only

With add/remove buttons


hi again, :)

follwing what @wuddrum said, i have modified the library again, in away, to make everything dynamic.

now i believe, you can do whatever you want. you can read the index file in the github project for documentation (haven't time to work on styling the documentation :p ).

but i believe it explains everything the script now can do!! :D

with examples showing, you can understand, the functionality of the new options i have added to the library.

i committed to muster branch, so last bounty will show the new work also, but you still can see last bounty from jsfiddle.

regarding the design of selecting, deselecting, sorting (dragging), it's fully customized, so you can change it whenever you want and you can use any library you want!! it's just a html code that should be inserted in. :D

code in github: https://github.com/chlegou/addSortableToLoodevLib

docs in github: https://chlegou.github.io/addSortableToLoodevLib/

Enjoy it! ;)

Winning solution

@Chlegou reminded me that I should also add some options, so that it's a lot easier to arrive at the best solution combination.

Solution with 2kb html5sortable library: Codepen.io

Solution with 15kb Sortable library: Codepen.io.

options that I've added to multiselect:

enableHandle: adds a handle element to selected list items

handleClass: adds extra classes to handles

addButtonEnabled: adds an add button to selectable list items

addButtonClass: add extra classes to add buttons

removeButtonEnabled: add a remove button to selectable list items

removeButtonClasses: add extra classes to remove buttons

EDIT: Added solution with original 15kb library.

EDIT2: Updated the solutions to better showcase the available flexibility with options. Also added an arguably better-looking handle:

Solution with 15kb Sortable library: Codepen.io.

Solution with 2kb html5sortable library: Codepen.io

EDIT3: I've added the ability to not just sort the items within the selected item list, but also drag the items from one list to another, without any additional codebase changes (apart from adding a handler for selectable items).

Solution with 15kb Sortable library: Codepen.io

Solution with 2kb html5sortable library: Codepen.io

EDIT4: Added solution for html5sortable library along with some minor improvements.
Also, with this solution handle options have changed to:

enableSelectableHandle: add a handle element to selectable items

enableSelectionHandle: add a handle element to selection items

EDIT5: Actually, here's a solution that requires NO changes to any libraries, but still retaining all of the function - handles, sorting, cross-list dragging and add/remove buttons. With this solution I've also included a fix for most flickering and the wrong highlight bug that happens on Chrome browsers.

All of the previous options remain as described, but must be now called from within afterInit and before any sortable initialization, using setUpContainer(this, {options}).

Solution with Sortable library: Codepen.io

Solution with html5sortable library: Codepen.io

this can be already achieved with the solution i have create, i can't see any new features regarding that. adding extra classes, can be achieved by creating nested html element, that hold the classes you want to add. otherwise, in the solution i have created, even the add delete buttons, are customized through html content.
Chlegou 5 months ago
This is my already existing solution but with flexibility options that I forgot to add when I originally made my solution. And I added only the necessary options, instead of over-cluttering the library. As you very well know, more options = more code logic = bigger chances of some unexpected bug. Plus attaching classes should be enough, instead of injecting your own html.
Wuddrum 5 months ago
changes comparing both codes can be obvious from here https://www.diffchecker.com/0dXkluSW, i just expanded it, with few line of codes, my solution is only 576 line not 606 like yours. even the owner of the library will never notice the 25 lines i have added on the original library. also, with tests made, it worked fine, with no problem as i believe it will always do. i believe focusing on improving skills, will always give us as result, customized libraries but with few changes only, that should help us do what we want with no restrictions.
Chlegou 5 months ago
I was talking about the amount of code logic not lines of code. I also could have written a bunch of if/else one-liners that arguably hurt readability.
Wuddrum 5 months ago
i answered that also, actually, that's what i meant by my last comment.
Chlegou 5 months ago
View Timeline