JQuery: как расширить область перетаскивания для всего div - PullRequest
Новая
       0

JQuery: как расширить область перетаскивания для всего div

1 голос
/ 11 января 2011


Я ищу способ добавить предмет в div, и брошенный предмет автоматически идет туда и присоединяется к сортируемому 'ul'.Во всем div включена только одна возможность удаления.
Я использую sortable в jQuery.

Мне нужен весь div, содержащий сортируемый ul, чтобы быть областью отбрасывания.

поле для комментариев flexi

Ответы [ 2 ]

2 голосов
/ 11 января 2011

Это заняло у меня какое-то время, но я сам понял это ... Может быть, я смогу спасти кого-то еще от боли, так что вот так ...

просто преобразовать div в функцию перетаскиваемого события и события dropдобавить перетаскиваемый элемент в дочерние элементы целевого списка.
Это не так просто, поскольку при перетаскивании физически перетаскиваемый элемент (объект) не доступен программно со всеми его атрибутами.Похоже, вы просто получаете текст в атрибутах, а не даже идентификатор.
Моя идея состояла в том, чтобы сохранить идентификатор элемента при событии мыши вниз при начале перетаскивания.затем я создал полный элемент списка, предоставив текст из текста перетаскиваемого элемента и присвоив ему идентификатор, который я сохранил ранее.в событии мыши вниз в начале процесса.

Установка события перетаскивания мыши на перетаскиваемом элементе (в моем случае элемент списка) ##

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

<li align="left" onmousedown="mouseDown(this)" id="1832" class="ui-state-default">Advanced Econometrics II | E 805</li>

Функция Mouse Down, сохраняющая идентификатор элементаперетаскиваемый элемент

Возможно, важно упомянуть, что вам не следует инициализировать переменную dragged_course_id со словом 'var' перед ней, потому что если вы это сделаете, переменная станет локальной и не будет доступна в событии dropфункция в конце процесса перетаскивания.

function mouseDown(item)
{
    dragged_course_id = item.id;
//  alert (dragged_course_id);
    }

Конфигурация Droppable Div 

 $(function() {
        $( "#droppable" ).droppable({
            activeClass: "greedy",
            hoverClass: "over_state",
            drop: function( event, ui )
             {
                $( this ).removeClass("over_state");
                target_stack = document.getElementById('sortable2');
                var already_selected_courses = target_stack.childNodes;
                ignore=false;
                for (i=0;i<already_selected_courses.length; i++)
                {
                    if (dragged_course_id == already_selected_courses[i].id) ignore=true;
                }
                if (!ignore) $( "<li align='left' class='ui-state-default' id= "+dragged_course_id+"></li>" ).text( ui.draggable.text() ).appendTo( target_stack);

                available_stack = document.getElementById('sortable1').childNodes;

                for (i=0; i<available_stack.length;i++)
                    if (available_stack[i].id == dragged_course_id) available_stack[i].parentNode.removeChild(available_stack[i]);


            },




                    out: function(event, ui)
                     {
                          $(this)
                    .removeClass('over_state')
                    .removeClass('greedy')
                     }  


        });
    });

Это оказалось хорошо, но затем возникла проблема с возможностью удаления самого списка.Когда элемент был удален в div, событие срабатывания сбрасывалось, но когда элемент удалялся в самом списке, то запускались оба события удаления, добавляя перетаскиваемый элемент дважды.Для этого мне пришла в голову эта дерзкая (не особо красивая) идея: я удаляю последний элемент в событии приема целевой сортировки!

Целевая сортируемая конфигурация ## 

$( "#sortable2" ).sortable({
            greedy: 'true',
            connectWith: ".connectedSortable",
            cancel: ".ui-state-disabled",
            items: "li:not(.ui-state-active)",  
            receive: function(event,ui)
            {
                 target_stack = document.getElementById('sortable2');
                 target_stack.removeChild(target_stack.lastChild);
            },
            dropOnEmpty: false
        });

Поле комментариев Flexi

1 голос
/ 11 января 2011

вам просто нужно повторно запустить sortable('.myclass') после того, как вы вставили новый элемент.
Возможно, вам придется удалить существующие сортируемые по существующим элементам.

...