JQuery UI сортируемый: как эмулировать событие beforeStart? - PullRequest
Новая
       11

JQuery UI сортируемый: как эмулировать событие beforeStart?

0 голосов
/ 12 мая 2010

я использую сортируемый плагин jQuery UI для сортировки некоторых высоких наборов полей (высота ~ 300 пикселей).

Моя цель - скрыть основное содержимое этого набора полей, оставляя видимым только тег легенда (который на самом деле является сортируемым обработчиком) ... проблема в том, что, как вы можете видеть в стандартных событиях из сортируемого плагина есть beforeStop, но не beforeStart.

Это код, который я написал: 

$(document).ready(function(){
    $("#label-copy-list").sortable({
        handle : '.handle',
        start: function(){
            $(".sort-hidden").hide();
        },
        stop: function(){
            $(".sort-hidden").show();
        }
    });
});

Я попытался использовать событие start вместо этого, но оно работает наполовину: оно скрывает содержимое, но (я полагаю) всего секунду назад, и их расположение остается «дополненным», как и они. не скрывать ..

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

Снимок экрана 1 : «нормальная» ситуация со всем видимым содержимым, содержимое на синем фоне Снимок экрана 2 : что происходит, когда пользователь запускает перетаскивание; все содержимое скрыто, но тот, который пользователь перетаскивает, сохраняет высоту, поскольку его содержимое все еще отображается (оранжевым цветом выделено пространство, которое я не хочу иметь) Снимок экрана 3 : что я хочу получить, когда пользователь начнет перетаскивать элементы

Я смог сделать то, что хочу, сначала щелкнув по другой кнопке (которая скрывает все содержимое), а затем начал перетаскивание.

Есть идеи?

1 Ответ

3 голосов
/ 12 мая 2010

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

$(document).ready(function(){
 $('#label-copy-list')
  .sortable()
  .find('.sort-header').dblclick(function(){
   $(this).find('.sort-hidden').toggle();
   return false;
  })
})

Обновление: я возился с настройкой, и, если отображается sort-hidden, сортировка становится более громоздкой. Итак, я добавил событие mousedown, чтобы скрыть его. Таким образом, в конечном итоге вам нужно дважды щелкнуть, чтобы показать, но один щелчок, чтобы скрыть (поскольку предполагается, что вы начинаете сортировку). 

$(document).ready(function(){
 $('#label-copy-list')
  .sortable()
  .find('.sort-header')
   .dblclick(function(){
    $(this).find('.sort-hidden').toggle();
    return false;
   })
   .bind('mousedown', function(){
    $(".sort-hidden").hide();
   })
})

Обновление №2: Хм, хорошо, а как насчет использования jQuery event.timeStamp ? Обновленная демоверсия 

$(document).ready(function(){
    var last, diff,
        clickDelay = 500; // milliseconds
    $('#label-copy-list')
        .sortable()
        .find('.sort-header')
        .bind('mousedown', function(e){
            last = e.timeStamp;
        })
        .bind('mouseup', function(e){
            diff = e.timeStamp - last;
            if ( diff < clickDelay ) {
                $(this).find('.sort-hidden').toggle();
            }
        })
})
...