Как получить идентификатор родительского контейнера после сортировки с помощью сортировки Jquery? - PullRequest
Новая
       27

Как получить идентификатор родительского контейнера после сортировки с помощью сортировки Jquery?

7 голосов
/ 06 апреля 2010

У меня есть следующая разметка и javascript для сортировки некоторых элементов. Элементы могут быть отсортированы внутри блока или по другим блокам. Это работает, но у меня проблема с получением правильного идентификатора блока после перемещения элемента из одного блока в другой.

Например, если я перемещаю элемент 1 в блоке 1, я получаю «Я в блоке = блок_1», но если я перемещаю элемент 1 в блок 2, я все равно получаю, что я в блоке 1.

Но я хочу сделать блок 2 своим родительским контейнером. Мне нужно получить этот идентификатор, чтобы я мог сделать ajax и соответствующим образом обновить базу данных.

Можете ли вы помочь мне исправить это ?? 

<div id="blocks_sortable">
    <div id="block_1">
        <h2>Block 1</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_1"> 
                <span>Item 1</span></div>   
            <div id="item_2"> 
                <span>Item 2</span></div>
            <div id="item_3"> 
                <span>Item 3</span></div>
        </div>
    </div>  
    <div id="block_2">
        <h2>Block 2</h2>

        <div class="items_sortable connectedSortable">
            <div id="item_4"> 
                <span>Item 4</span></div>   
            <div id="item_5"> 
                <span>Item 5</span></div>
            <div id="item_6"> 
                <span>Item 6</span></div>
        </div>
    </div>
</div>

<script>
$("#blocks_sortable").sortable({ });
$(".items_sortable").sortable({
     connectWith: '.connectedSortable'
    , forcePlaceholderSize: true
    ,         stop : function(event, ui){
                    alert("I am in block = "+$(this).parent().attr("id"));
                }
}).disableSelection();      
</script>

Спасибо.

Ответы [ 3 ]

7 голосов
/ 07 апреля 2010

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

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

Я думаю, что вы хотите что-то вроде «обновить» или «деактивировать» события.

Оба эти события сработают один раз для каждого "блока", если вы переместите элемент из одного "блока" в другой.

Обновление сработает только один раз, если перемещено в блоке

Деактивация всегда срабатывает для всех блоков.

С обновлением вы можете проверить, запускается ли событие в «неоригинальном» блоке, проверив ui.sender: 

        $(".items_sortable").sortable({
            connectWith: '.connectedSortable',
            forcePlaceholderSize: true,
            update: function(event, ui){
                if(ui.sender){
                    alert(ui.item.attr("nodeName") + "  in block = " + 
                    $(this).parent().attr("id"));
                }
            }
        }).disableSelection();

Оповещает родительский идентификатор ТОЛЬКО при перемещении элемента в другой блок. Событие сработает для обоих блоков, но предупреждение будет отображаться только для «неоригинального».

Если вы используете AJAX для обновления информации в БД, я подозреваю, что вы хотите, чтобы событие сработало для обоих блоков:

Один раз для «оригинала», в котором сейчас отсутствует элемент, и один для «нового», который теперь получил элемент.

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

Надеюсь, это поможет.

1 голос
/ 06 апреля 2010

возможно, лучше вместо использования атрибута id вы идентифицируете элементы по их индексу.

так больше похоже на 

alert('I am in block' + $(this).parent().index());
0 голосов
/ 07 апреля 2010

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

...