* picker support sortValuesByDnd option.

dist/lib/picker/zui.picker.css

 /*!
- * ZUI: 选择器 - v1.9.1 - 2020-05-11
+ * ZUI: 选择器 - v1.9.1 - 2020-05-12
  * http://openzui.com
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2020 cnezsoft.com; Licensed MIT
@@ -151,6 +151,9 @@
 .picker-single.picker-focus .picker-selection-remove {
   display: none;
   }
+.picker-multi.picker-sortable .picker-selection-text {
+  cursor: move;
+  }
 .picker-search {
   color: transparent;
   background: none;

dist/lib/picker/zui.picker.js

 /*!
- * ZUI: 选择器 - v1.9.1 - 2020-05-11
+ * ZUI: 选择器 - v1.9.1 - 2020-05-12
  * http://openzui.com
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2020 cnezsoft.com; Licensed MIT
@@ -14,7 +14,6 @@
 
 /**
  * TODO:
- *  * Option: sortMultiValuesByDnd
  *  * 优化展开时滚动到选中项体验
  */
 
@@ -61,7 +60,7 @@
         searchDelay: 200,
         fixLabelFor: true,
         hotkey: true,
-        // sortMultiValuesByDnd: false,
+        // sortValuesByDnd: false,
         // defaultValue: null,
         onSelect: null, // function({value, picker}),
         onDeselect: null, // function({value, picker}),
@@ -294,10 +293,33 @@
                     return;
                 }
             }).on('mouseup', function(e) {
-                if (!$(e.target).closest('.picker-selection-remove').length && !that.dropListShowed) {
+                if (!$selections.hasClass('sortable-sorting') && !$(e.target).closest('.picker-selection-remove').length && !that.dropListShowed) {
                     that.focus();
                 }
             });
+
+            var sortValuesByDnd = options.sortValuesByDnd;
+            if (sortValuesByDnd && $.fn.sortable) {
+                $container.addClass('picker-sortable');
+                var sortableOptions = {
+                    selector: '.picker-selection',
+                    stopPropagation: true,
+                    start: function() {
+                        that.hideDropList();
+                    },
+                    finish: function(e) {
+                        var values = [];
+                        $.each(e.list, function(_, ele) {
+                            values.push(ele.item.data('value'));
+                        });
+                        that.setValue(values, false, true);
+                    }
+                };
+                if (typeof sortValuesByDnd === 'object') {
+                    $.extend(sortableOptions, sortValuesByDnd);
+                }
+                $selections.sortable(sortableOptions);
+            }
         }
         $selections.on('click', '.picker-selection-remove', function(e) {
             if (that.multi) {
@@ -990,7 +1012,7 @@
         }
     };
 
-    Picker.prototype.setValue = function(value, silent) {
+    Picker.prototype.setValue = function(value, silent, skipRenderSelections) {
         var that = this;
         var options = that.options;
 
@@ -1048,40 +1070,42 @@
         }
         $formItem.val(value);
 
-        // Update container
-        var hasValue = false;
-        if (that.multi) {
-            var $selections = that.$selections;
-            var $selects = $selections.children('.picker-selection').addClass('picker-expired');
-            $.each(value, function(_index, val) {
-                if (val === undefined || val === null) {
-                    val = '';
-                } else if (typeof val !== 'string') {
-                    val = String(val);
-                }
-                var item = that.getListItem(val);
-                if (!item) {
-                    return;
-                }
-                hasValue = true;
-                var text = item[options.textKey];
-                var itemID = that.getItemID(item, 'selection');
-                var $select = $selects.find('#' + itemID);
-                if (!$select.length) {
-                    $select = $('<div class="picker-selection" id="' + itemID + '"><span class="picker-selection-text"></span><span class="picker-selection-remove"></span></div>').data('value', val);
-                } else {
-                    $select.removeClass('picker-expired');
-                }
-                $select.find('.picker-selection-text').text(text);
-                $select.attr('title', text).insertBefore(that.$search);
-            });
-            $selects.filter('.picker-expired').remove();
-        } else {
-            var item = that.getListItem(value);
-            hasValue = !!item;
-            that.$singleSelection.find('.picker-selection-text').text(hasValue ? item[options.textKey] : '');
+        // Update selections
+        if (!skipRenderSelections) {
+            var hasValue = false;
+            if (that.multi) {
+                var $selections = that.$selections;
+                var $selects = $selections.children('.picker-selection').addClass('picker-expired');
+                $.each(value, function(_index, val) {
+                    if (val === undefined || val === null) {
+                        val = '';
+                    } else if (typeof val !== 'string') {
+                        val = String(val);
+                    }
+                    var item = that.getListItem(val);
+                    if (!item) {
+                        return;
+                    }
+                    hasValue = true;
+                    var text = item[options.textKey];
+                    var itemID = that.getItemID(item, 'selection');
+                    var $select = $selects.find('#' + itemID);
+                    if (!$select.length) {
+                        $select = $('<div class="picker-selection" id="' + itemID + '"><span class="picker-selection-text"></span><span class="picker-selection-remove"></span></div>').data('value', val);
+                    } else {
+                        $select.removeClass('picker-expired');
+                    }
+                    $select.find('.picker-selection-text').text(text);
+                    $select.attr('title', text).insertBefore(that.$search);
+                });
+                $selects.filter('.picker-expired').remove();
+            } else {
+                var item = that.getListItem(value);
+                hasValue = !!item;
+                that.$singleSelection.find('.picker-selection-text').text(hasValue ? item[options.textKey] : '');
+            }
+            that.$container.toggleClass('picker-no-value', !hasValue).toggleClass('picker-has-value', hasValue);
         }
-        that.$container.toggleClass('picker-no-value', !hasValue).toggleClass('picker-has-value', hasValue);
 
         if (that.dropListShowed) {
             that.renderOptionsList();

dist/lib/picker/zui.picker.min.css

 /*!
- * ZUI: 选择器 - v1.9.1 - 2020-05-11
+ * ZUI: 选择器 - v1.9.1 - 2020-05-12
  * http://openzui.com
  * GitHub: https://github.com/easysoft/zui.git 
  * Copyright (c) 2020 cnezsoft.com; Licensed MIT
- */.picker{min-height:32px;background-color:#eee}.picker:not(.picker-ready)>*{display:none}.picker-selections{position:relative;min-height:32px;color:#222;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.picker-focus .picker-selections{border-color:#145ccd;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(20,92,205,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(20,92,205,.6)}.picker-multi .picker-selections{padding:3px}.picker-multi.picker-focus .picker-selections:before{position:absolute;right:0;bottom:8px;display:block;width:24px;height:14px;font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-align:center;text-transform:none;content:'\e603';opacity:.4;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.picker-multi.picker-focus.picker-loading .picker-selections::before{display:inline-block;content:'\e97c';-webkit-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.picker-multi .picker-selection{position:relative;display:inline-block;padding:0 20px 0 5px;margin:2px;line-height:18px;background-color:#f1f1f1;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;-webkit-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05)}.picker-selection-single{max-width:100%;padding:5px 20px 5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-focus .picker-selection-single .picker-selection-text{display:none}.picker-selection-single:after{position:absolute;top:7px;right:0;display:block;width:24px;height:14px;font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-align:center;text-transform:none;content:'\e6b8';opacity:.4;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.picker-focus .picker-selection-single::after{content:'\e603'}.picker-focus.picker-loading .picker-selection-single::after{display:inline-block;content:'\e97c';-webkit-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.picker-selection-remove{position:absolute;top:0;right:0;width:20px;height:20px;text-align:center;cursor:pointer;opacity:.2}.picker-selection-remove:before{font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-shadow:0 1px 0 #fff;text-transform:none;content:'\d7';speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.picker-selection-remove:hover{opacity:.5}.picker-single .picker-selection-remove{top:5px;right:20px}.picker-no-value .picker-selection-remove,.picker-single.picker-focus .picker-selection-remove{display:none}.picker-search{color:transparent;background:0 0;border:none}.picker-search:focus{color:inherit;outline:0}.picker-single .picker-search{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;padding:5px 8px}.picker-multi .picker-search{display:inline-block;width:10px;min-width:10px;max-width:100%;padding:0 2px;margin:2px 0}.picker-placeholder{position:absolute;top:5px;right:20px;left:8px;z-index:0;display:none;overflow:hidden;color:grey;text-overflow:ellipsis;white-space:nowrap}.picker-no-value.picker-focus .picker-placeholder{display:none}.picker-input-empty.picker-focus.picker-no-value .picker-placeholder,.picker-no-value .picker-placeholder{display:block}.picker-drop-menu{position:fixed;z-index:1200;display:none;min-width:100px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.1);box-shadow:0 6px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.1);opacity:0}.picker-drop-menu.picker-drop-show{display:block}.picker-drop-menu.picker-has-message{min-height:22px;padding-bottom:22px}.picker-option-list{padding:5px 0;margin:0;overflow-y:auto}.picker-no-options .picker-option-list{display:none}.picker-option{display:block;min-height:30px;padding:5px 10px;overflow:hidden;clear:both;font-weight:400;line-height:1.53846154;color:#353535;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:none;-o-transition:none;transition:none}.picker-single .picker-option.picker-option-selected{color:#3280fc;background:#ebf2f9}.picker-option:focus,.picker-option:hover{text-decoration:none}.picker-option.picker-option-active,.picker-single .picker-option.picker-option-selected.picker-option-active{color:#fff;background-color:#3280fc}.picker-multi .picker-option.picker-option-selected,.picker-multi .picker-option.picker-option-selected.picker-option-active{color:#ccc;cursor:not-allowed;background-color:#fff}.picker-option-text-matched{position:relative;color:#3280fc}.picker-option-text-matched:before{position:absolute;right:0;bottom:-4px;left:0;display:block;height:3px;content:' ';background-color:#3280fc;border-radius:2px;opacity:.5}.picker-option-active .picker-option-text-matched,.picker-option:hover .picker-option-text-matched{color:#fff}.picker-option-active .picker-option-text-matched:before,.picker-option:hover .picker-option-text-matched:before{background-color:#fff}.picker-message{position:absolute;right:0;bottom:0;left:0;display:none;height:22px;padding:2px 5px;overflow:hidden;font-size:12px;color:grey;text-overflow:ellipsis;white-space:nowrap;background-color:#f1f1f1}.picker-has-message .picker-message{display:block}.picker-message[data-type=danger]{color:#ea644a}
\ No newline at end of file
+ */.picker{min-height:32px;background-color:#eee}.picker:not(.picker-ready)>*{display:none}.picker-selections{position:relative;min-height:32px;color:#222;background-color:#fff;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075)}.picker-focus .picker-selections{border-color:#145ccd;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(20,92,205,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(20,92,205,.6)}.picker-multi .picker-selections{padding:3px}.picker-multi.picker-focus .picker-selections:before{position:absolute;right:0;bottom:8px;display:block;width:24px;height:14px;font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-align:center;text-transform:none;content:'\e603';opacity:.4;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.picker-multi.picker-focus.picker-loading .picker-selections::before{display:inline-block;content:'\e97c';-webkit-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.picker-multi .picker-selection{position:relative;display:inline-block;padding:0 20px 0 5px;margin:2px;line-height:18px;background-color:#f1f1f1;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ddd;border-radius:3px;-webkit-box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05);box-shadow:0 0 2px #fff inset,0 1px 0 rgba(0,0,0,.05)}.picker-selection-single{max-width:100%;padding:5px 20px 5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.picker-focus .picker-selection-single .picker-selection-text{display:none}.picker-selection-single:after{position:absolute;top:7px;right:0;display:block;width:24px;height:14px;font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-align:center;text-transform:none;content:'\e6b8';opacity:.4;speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.picker-focus .picker-selection-single::after{content:'\e603'}.picker-focus.picker-loading .picker-selection-single::after{display:inline-block;content:'\e97c';-webkit-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.picker-selection-remove{position:absolute;top:0;right:0;width:20px;height:20px;text-align:center;cursor:pointer;opacity:.2}.picker-selection-remove:before{font-family:ZenIcon;font-size:14px;font-style:normal;font-weight:400;font-variant:normal;line-height:1;text-shadow:0 1px 0 #fff;text-transform:none;content:'\d7';speak:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.picker-selection-remove:hover{opacity:.5}.picker-single .picker-selection-remove{top:5px;right:20px}.picker-no-value .picker-selection-remove,.picker-single.picker-focus .picker-selection-remove{display:none}.picker-multi.picker-sortable .picker-selection-text{cursor:move}.picker-search{color:transparent;background:0 0;border:none}.picker-search:focus{color:inherit;outline:0}.picker-single .picker-search{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;padding:5px 8px}.picker-multi .picker-search{display:inline-block;width:10px;min-width:10px;max-width:100%;padding:0 2px;margin:2px 0}.picker-placeholder{position:absolute;top:5px;right:20px;left:8px;z-index:0;display:none;overflow:hidden;color:grey;text-overflow:ellipsis;white-space:nowrap}.picker-no-value.picker-focus .picker-placeholder{display:none}.picker-input-empty.picker-focus.picker-no-value .picker-placeholder,.picker-no-value .picker-placeholder{display:block}.picker-drop-menu{position:fixed;z-index:1200;display:none;min-width:100px;background-color:#fff;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.1);box-shadow:0 6px 12px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.1);opacity:0}.picker-drop-menu.picker-drop-show{display:block}.picker-drop-menu.picker-has-message{min-height:22px;padding-bottom:22px}.picker-option-list{padding:5px 0;margin:0;overflow-y:auto}.picker-no-options .picker-option-list{display:none}.picker-option{display:block;min-height:30px;padding:5px 10px;overflow:hidden;clear:both;font-weight:400;line-height:1.53846154;color:#353535;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:none;-o-transition:none;transition:none}.picker-single .picker-option.picker-option-selected{color:#3280fc;background:#ebf2f9}.picker-option:focus,.picker-option:hover{text-decoration:none}.picker-option.picker-option-active,.picker-single .picker-option.picker-option-selected.picker-option-active{color:#fff;background-color:#3280fc}.picker-multi .picker-option.picker-option-selected,.picker-multi .picker-option.picker-option-selected.picker-option-active{color:#ccc;cursor:not-allowed;background-color:#fff}.picker-option-text-matched{position:relative;color:#3280fc}.picker-option-text-matched:before{position:absolute;right:0;bottom:-4px;left:0;display:block;height:3px;content:' ';background-color:#3280fc;border-radius:2px;opacity:.5}.picker-option-active .picker-option-text-matched,.picker-option:hover .picker-option-text-matched{color:#fff}.picker-option-active .picker-option-text-matched:before,.picker-option:hover .picker-option-text-matched:before{background-color:#fff}.picker-message{position:absolute;right:0;bottom:0;left:0;display:none;height:22px;padding:2px 5px;overflow:hidden;font-size:12px;color:grey;text-overflow:ellipsis;white-space:nowrap;background-color:#f1f1f1}.picker-has-message .picker-message{display:block}.picker-message[data-type=danger]{color:#ea644a}
\ No newline at end of file

src/js/picker.js

@@ -7,7 +7,6 @@
 
 /**
  * TODO:
- *  * Option: sortMultiValuesByDnd
  *  * 优化展开时滚动到选中项体验
  */
 
@@ -54,7 +53,7 @@
         searchDelay: 200,
         fixLabelFor: true,
         hotkey: true,
-        // sortMultiValuesByDnd: false,
+        // sortValuesByDnd: false,
         // defaultValue: null,
         onSelect: null, // function({value, picker}),
         onDeselect: null, // function({value, picker}),
@@ -287,10 +286,33 @@
                     return;
                 }
             }).on('mouseup', function(e) {
-                if (!$(e.target).closest('.picker-selection-remove').length && !that.dropListShowed) {
+                if (!$selections.hasClass('sortable-sorting') && !$(e.target).closest('.picker-selection-remove').length && !that.dropListShowed) {
                     that.focus();
                 }
             });
+
+            var sortValuesByDnd = options.sortValuesByDnd;
+            if (sortValuesByDnd && $.fn.sortable) {
+                $container.addClass('picker-sortable');
+                var sortableOptions = {
+                    selector: '.picker-selection',
+                    stopPropagation: true,
+                    start: function() {
+                        that.hideDropList();
+                    },
+                    finish: function(e) {
+                        var values = [];
+                        $.each(e.list, function(_, ele) {
+                            values.push(ele.item.data('value'));
+                        });
+                        that.setValue(values, false, true);
+                    }
+                };
+                if (typeof sortValuesByDnd === 'object') {
+                    $.extend(sortableOptions, sortValuesByDnd);
+                }
+                $selections.sortable(sortableOptions);
+            }
         }
         $selections.on('click', '.picker-selection-remove', function(e) {
             if (that.multi) {
@@ -983,7 +1005,7 @@
         }
     };
 
-    Picker.prototype.setValue = function(value, silent) {
+    Picker.prototype.setValue = function(value, silent, skipRenderSelections) {
         var that = this;
         var options = that.options;
 
@@ -1041,40 +1063,42 @@
         }
         $formItem.val(value);
 
-        // Update container
-        var hasValue = false;
-        if (that.multi) {
-            var $selections = that.$selections;
-            var $selects = $selections.children('.picker-selection').addClass('picker-expired');
-            $.each(value, function(_index, val) {
-                if (val === undefined || val === null) {
-                    val = '';
-                } else if (typeof val !== 'string') {
-                    val = String(val);
-                }
-                var item = that.getListItem(val);
-                if (!item) {
-                    return;
-                }
-                hasValue = true;
-                var text = item[options.textKey];
-                var itemID = that.getItemID(item, 'selection');
-                var $select = $selects.find('#' + itemID);
-                if (!$select.length) {
-                    $select = $('<div class="picker-selection" id="' + itemID + '"><span class="picker-selection-text"></span><span class="picker-selection-remove"></span></div>').data('value', val);
-                } else {
-                    $select.removeClass('picker-expired');
-                }
-                $select.find('.picker-selection-text').text(text);
-                $select.attr('title', text).insertBefore(that.$search);
-            });
-            $selects.filter('.picker-expired').remove();
-        } else {
-            var item = that.getListItem(value);
-            hasValue = !!item;
-            that.$singleSelection.find('.picker-selection-text').text(hasValue ? item[options.textKey] : '');
+        // Update selections
+        if (!skipRenderSelections) {
+            var hasValue = false;
+            if (that.multi) {
+                var $selections = that.$selections;
+                var $selects = $selections.children('.picker-selection').addClass('picker-expired');
+                $.each(value, function(_index, val) {
+                    if (val === undefined || val === null) {
+                        val = '';
+                    } else if (typeof val !== 'string') {
+                        val = String(val);
+                    }
+                    var item = that.getListItem(val);
+                    if (!item) {
+                        return;
+                    }
+                    hasValue = true;
+                    var text = item[options.textKey];
+                    var itemID = that.getItemID(item, 'selection');
+                    var $select = $selects.find('#' + itemID);
+                    if (!$select.length) {
+                        $select = $('<div class="picker-selection" id="' + itemID + '"><span class="picker-selection-text"></span><span class="picker-selection-remove"></span></div>').data('value', val);
+                    } else {
+                        $select.removeClass('picker-expired');
+                    }
+                    $select.find('.picker-selection-text').text(text);
+                    $select.attr('title', text).insertBefore(that.$search);
+                });
+                $selects.filter('.picker-expired').remove();
+            } else {
+                var item = that.getListItem(value);
+                hasValue = !!item;
+                that.$singleSelection.find('.picker-selection-text').text(hasValue ? item[options.textKey] : '');
+            }
+            that.$container.toggleClass('picker-no-value', !hasValue).toggleClass('picker-has-value', hasValue);
         }
-        that.$container.toggleClass('picker-no-value', !hasValue).toggleClass('picker-has-value', hasValue);
 
         if (that.dropListShowed) {
             that.renderOptionsList();

src/less/components/picker.less

@@ -116,6 +116,11 @@
         display: none;
     }
 }
+.picker-selection-text {
+    .picker-multi.picker-sortable & {
+        cursor: move;
+    }
+}
 .picker-search {
     border: none;
     background: none;