Introduction to the design and implementation of MultiSelect left and right selection controls_jquery

Since the left and right selection controls are used in the project, I found some related implementations on the Internet. There are basically two:
1. Control based on JQuery UI:

This looks good in style. And the functions are relatively complete when used, but it is different from the traditional way of selecting from the left to the right, which is a bit awkward.
2. A control handwritten by a brother:

This meets my needs, simple and practical, but it does not meet my other need. My need is that the selection box on the right needs to be able to Choose a different color image, and this style is a bit unsightly.

How can I write one myself? It took me a long time to work hard, but I finally got it. Post it and share it with everyone:

This not only meets my functional needs but also satisfies my needs. meets my style requirements.
Regarding color selection, I quoted jquery.colorPicker.js, a third-party plug-in. I prefer things that are simple, practical and beautiful.
Regarding the code, there is too much to post here. Let me talk about my implementation. The left and right controls use the datagrid control of jQuery easy UI. I also tried several controls. Only this one meets my requirements. Of course I also did some processing on the datagrid by removing the title and manually modifying the style. The basic logic of left and right selection and up and down control is the same, which is implemented by calling some methods of the datagrid. Of course, this control gray-out button also has a lot of logic controls, the purpose is to make it more convenient for users to use.