JQuery сортируемый droponempty исправить - PullRequest
Новая
       0

JQuery сортируемый droponempty исправить

1 голос
/ 23 сентября 2011

Я работаю с сортируемым jQuery (jQuery ui)

По умолчанию dropOnEmpty = true, и как ускорение Я применяю connectwith после Я применяю .sortable() к своим селекторам следующим образом: 

<script type="text/javascript">  
  $('#selector1').sortable({ 
    over: function(ev,ui){
      console.log('Dragging over: '+$j(ui.placeholder).parent().parent().parent().attr('id'));
    } 
  )};  
  $('#selector2').sortable({ 
    over: function(ev,ui){
      console.log('Dragging over: '+$j(ui.placeholder).parent().parent().parent().attr('id'));
    } 
  )};

  $('.ui-sortable').sortable('option', connectWith', '.ui-sortable');
</script>

Я продемонстрировал свою запись в лог , чтобы попытаться выяснить, что происходит.selector2 (который пуст) - запись в журнал не отображается, но, если я перетаскиваю обратно в источник, я получаю запись в журнал, а затем, когда я перетаскиваю обратно в целевой столбец, он работает?ui-sortable класс, но он не соединяется!

Как мне убедиться, что даже пустые списки при применении соединения после инициализации connectWith отдельно?

Ответы [ 2 ]

3 голосов
/ 06 июля 2012

@ Объяснение Джека о том, почему вы не можете попасть в пустые сортируемые материалы, верно.Сортируемый кэширует позиции своих сортируемых элементов в начале начала перетаскивания перед выполнением любых обратных вызовов.Поэтому, если вы изменяете высоту зон перетаскивания в обратном вызове, они игнорируются, так как он все еще использует кэшированные значения.

Если вы используете метод 'refreshPositions' Sortable сразу после настройкиВысота в вашем обратном вызове сортируемая теперь должна иметь точную информацию о позиционировании, чтобы вы могли успешно попасть в целевую зону, не касаясь непустого сортируемого списка. 

$('#sortable').sortable({
    start: function (e, ui) {
        $('.sortable_drop_zone').css('min-height', '50px');
        $('#sortable').sortable('refreshPositions');
    }
});
3 голосов
/ 23 сентября 2011

http://jsfiddle.net/MMyP3/5/

РЕДАКТИРОВАТЬ: Код по запросу:

HTML: 

<div id="container" style="display:inline">
<div id="column1" class="column">

<div class="element">Element 1</div>
<div class="element">Element 4</div>

</div>

<div id="column2" class="column">

<div class="element">Element 2</div>
<div class="element">Element 3</div>

</div>

<div id="column3" class="column">

</div>

CSS: 

.column{
    border: 1px solid #E9EAEA;
    border-radius: 5px 5px 5px 5px;
    margin: 10px;
    min-width:100px;
    padding: 5px;  
    float:left;
    width:100px;
}

.element{
    border: 1px solid #E9EAEA;
    border-radius: 5px 5px 5px 5px; 
}

Javascript: 

$('.column').sortable({
    var $this = $(this);
    activate: function(en, ui) {
        $this.css('min-height', '100px');
        $this.css('background-color', '#666');
    },
    deactivate: function(en, ui) {
        $this.css('min-height', '0px');
        $this.css('background-color', '#FFF');
    },
    placeholder: 'ui-state-highlight'
});

$('.column').sortable('option', 'connectWith', '.column');​

Редактировать: Я обновил свою ссылку, я думаю, что основной проблемой была ваша HTML-структура, которую я настроил, также убедитесь, что вы перетаскиваете элементы на верх пустого divs. То, что вы меняете цвет фона и минимальную высоту, не означает, что фактическая высота сортируемой области меняется. Таким образом, может показаться, что вы можете размещать предметы в любом месте открытой области, в действительности вы не можете этого сделать, если только вы не определяете высоту для сортируемых на ходу.

...