JQuery UI Slider с несколькими ручками: как остановить пересечение ручек?

Question

Я разрабатываю быстрое решение, в котором для определения ширины динамического макета используется ползунок с несколькими ручками.

Я попытался использовать ExtJS3 и последний пользовательский интерфейс JQuery.

В ExtJS вы можете ограничить дескрипторы, чтобы они не пересекались, и это довольно интуитивно понятный подход к нужному мне интерфейсу, однако есть причины, по которым я бы предпочел не использовать ExtJS для одного «острова» в море.JQuery.

Итак, кто-нибудь знает секретный атрибут или фрагмент кода, который ограничивает несколько дескрипторов в ползунке JQuery?

Для ясности: если у вас есть ползунок с двумя дескрипторамиодин в 40 и один в 60;из-за этого ограничения вы не сможете перетащить ручку с 60 до 20, не перемещая сначала 40.

Answer 1

В событии слайда вы можете ограничить движение ручки, проверив значения ползунка и вернув true, чтобы позволить слайду или false, чтобы предотвратить его (см. Документацию по пользовательскому интерфейсу jQuery для получения дополнительной информации)

Answer 2

Какой код вы используете для слайдера Jquery?Если посмотреть на демонстрационный слайдер диапазона , у него есть две ручки, и их невозможно пересечь.

Answer 3

Как указал @madcapnmckay, если у вас есть ползунок с двумя ручками и range: true в опциях, ручки нельзя перетаскивать друг на друга.

У меня возникла проблема, когда ее не былоограничивающий правильно, но оказалось, что у меня есть строка 'true' вместо логического true

Answer 4

Я немного опоздал на вечеринку здесь, но я хотел поделиться своим самым компактным, но читаемым способом сделать это. Технически это очень похоже на ответ @ tototresde.

slide: function (e, ui) {
  // Prevent crossing and overlapping of slider handles.
  if (ui.values[(ui.handleIndex - 1)] >= ui.value ||
      ui.values[(ui.handleIndex + 1)] <= ui.value) {
    return false;
  }
}

Answer 5

Проверьте это решение:

slide : function( event, ui ) {
        //Actual Handle Selected
        var handleIndex = $(ui.handle).index()-1;

        var diffA, diffB;

        //Check with right handles
        if(handleIndex > 0)
            diffA = ui.values[handleIndex] - ui.values[handleIndex-1];

        //Check with left handles
        if(handleIndex < ui.values.length-1)
            diffB = ui.values[handleIndex+1] - ui.values[handleIndex];

        if (diffA <= 0 || diffB <= 0) { /*checks for the values and compares*/
            return false;
        }
   }