jQuery перетащите элемент в сортируемый список, который имеет начальное состояние как скрытое - PullRequest
Новая
       6

jQuery перетащите элемент в сортируемый список, который имеет начальное состояние как скрытое

2 голосов
/ 25 января 2010

Я не могу перетащить элемент в сортируемый список, который имеет начальное состояние как скрытое (т. Е. Display: none).

HTML-код каждой строки выглядит следующим образом: 

<div class="dragbox" id="item1" >
  <h2>Expression 1<span id="exp1"></span></h2>
  <div class="dragbox-content" >
    <ul class="dragrow1"></ul>
    <ul class="dragrow2"></ul>
  </div>
</div>

Но чтобы поле можно было перетащить в «dragrow *», div «dragbox-content» должен иметь стиль «display: block». Это может быть либо написано в основном стиле CSS, либо жестко закодировано в самом div (например.)

Проблема в том, что при загрузке страницы вы хотите закрыть все строки (или, по крайней мере, все, кроме одной). Это означает, что «display» должен быть изначально установлен в «none». Эта часть проста. Некоторые jQuery могут изменить этот CSS при загрузке страницы в событии ready (): 

$('.dragbox')
.each(function(){
  $(this).find('.dragbox-content').hide();
});

И есть команда jQuery, которая называется 'toggle', которая при нажатии на тег h2 автоматически меняет это отображение css между блоком и нет. Так что я могу показать или скрыть каждый ряд.

Итак ... если в событии ready () отображается строка (display: block), можно перетаскивать элементы в сортируемый список (даже если вы переключаетесь между отображением и скрытием строки).

НО ... если строка скрыта (отображение: отсутствует) в событии ready (), невозможно перетащить элементы в сортируемый список.

Есть идеи? Действительно застрял на этом ...

Ответы [ 3 ]

5 голосов
/ 07 октября 2011

Это может быть слишком поздно, но вот решение (может быть, это может помочь кому-то еще).Хитрость в том, что вам нужно обновить сортируемое. 

$('.dragitem').draggable({
    start: function() {
        // show your dropzone
        $('#dropzone').show();

        // refresh your sortable -- so you can drop
        $('#dropzone').sortable('refresh');
    }
});
0 голосов
/ 25 января 2010

Не совсем уверен, является ли это приемлемым решением в ваших ограничениях, но вам придется показывать элементы, чтобы перетаскивать их, поэтому я бы посоветовал скрыть элементы, когда начинается перетаскивание. Таким образом, они не будут видны, пока им действительно не понадобится.

Вы могли бы сделать что-то вроде этого: 

$('.listOfDraggableItems').draggable({
    start: function(event, ui) {
        $('.dragbox').each(function(){
            $(this).find('.dragbox-content').show();
        });
    }
});
0 голосов
/ 25 января 2010

Вы можете использовать опцию connectToSortable Пример 

//getter
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//setter
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');

http://docs.jquery.com/UI/Draggable#option-connectToSortable

...