Любая опция для выбора значения между 2 выбранными элементами в Selectz ie. js в мобильном - PullRequest
Новая
       22

Любая опция для выбора значения между 2 выбранными элементами в Selectz ie. js в мобильном

1 голос
/ 06 марта 2020

Я использую Selectize.js для входа, чтобы выбрать несколько вариантов. Порядок выбранного значения важен для меня, и мне нужна опция, чтобы изменить порядок выбранных значений или выбрать новую опцию между выбранными значениями.

Но в мобильном представлении, кажется, нет возможности выбрать значение между 2 выбранными значениями. Это работает на рабочем столе, используя только клавиши со стрелками на клавиатуре.

Есть доступные плагины, такие как remove_button и drag_drop, но оба беспомощны в моей ситуации. drag_drop плагин еще не работает в мобильном телефоне. и remove_button только помогают отменить выбор значения.

Шаги для воспроизведения :

  1. На форме с вводом Selectize initialized.
  2. Выберите 3 значения из раскрывающегося списка
  3. Попробуйте добавить параметр между 2 и 3

Ожидаемый результат : см. Текстовый курсор на входе между значениями 2 и 3 и выберите опцию выпадающего списка. Если мы выберем опцию, она добавит между 2 и 3

Фактический результат : там мы не видим никакого курсора при нажатии между 2 выбранными значениями, только мы можем нажать на выбранное значение, которое не вносит изменений.

jsfiddle Ссылка здесь 

var optionList = [{ "name": "radialis",
                      "id": "1"
                  },
                  { "name": "Extensor",
                      "id": "2"
                  },
                  { "name": "Median nerve",
                      "id": "3"
                  },
                  { "name": "syndrome",
                      "id": "4"
                  },
                  { "name": "carpi",
                      "id": "5"
                  },
                  { "name": "longus",
                      "id": "6"
                  }];

$('#example').selectize({
		openOnFocus: true,
    options: optionList,
		labelField: "name",
		valueField: "id",
		sortField: "name",
		searchField: "name",
		closeAfterSelect: false,
    delimiter: ',',
    persist: false,
    maxItems: 15,
    create: function(input) {
        return {
            value: input,
            text: input
        }
    }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/js/standalone/selectize.min.js"></script>



<div class="container-fluid">
  <div class="form-group">
    <label for="exampleInputPassword1">Selectize.js</label>
    <input type="text" class="" id="example" value="3,4,1">
  </div>
</div>
...