Jquery Help: Draggable para Sortable e depois voltar para Draggable novamente

Question

Eu tenho um conjunto de itens na lista de arrasto que está conectado a um usando a opção connectToSortable classificáveis. Agora eu quero remover alguns itens deste lista de classificação e movê-los de volta à lista de arrasto. Como uma espécie de desfazer. Suponha que o usuário move a cerca de 5 itens a lista de classificação e decide que ele / ela quer apenas 4 itens, e decide basta arrastar o item indesejado da sortlist à lista de arrasto. Como posso fazer isso sem adicionar um link "Remover" na lista de classificação. Muito obrigado. Para mais informações, consulte http://the-stickman.com/web-development/javascript/jquery-dropping-items-from-a-draggable-list-to-a-sortable-list/

Answer 1

Este jQuery UI exemplo parece que você está depois. Possui dois lista conectado e o usuário pode arrastar elementos entre eles.

Mas eu suspeito que o cenário não coincide com o exemplo. Vamos dizer que você tem uma lista de arrasto, um UL com cada LI feita draggable e ligado a outro UL fez uma classificáveis ??(Veja este link para um exemplo). Cada vez que você arrastar algo da lista arrasto, clone é usado do elemento arrastado. Usando o "fora" do evento, você pode registrar quando se arrasta um item fora da lista de classificáveis ??e se o item ainda está fora quando o evento "stop" é acionado, removê-lo da classificáveis. Usando os ui.position & ui.offset propriedades do widget classificáveis, você pode determinar se o item foi arrastado sobre a lista de arrastar antes de remover o item da classificáveis.

Espero que isso ajude.

Answer 2

Eu acho que a solução mais simples é fazer com que sua lista droppable draggable também, e lidar com esse evento queda. Eu tenho um #priority_articles_list como classificáveis ??e li.article como graggable, eles estão dentro #articles. Na maioria dos casos simples que você pode apenas chamar ui.draggable.remove();, que deve fazer o truque.

$("#articles").droppable({
  accept: '#priority_articles_list > li',

  drop: function(ev, ui) {
    draggable_id = "#" + ui.draggable.attr("id").replace("priority_", "");
    $(draggable_id).removeClass("shouldnt_drag");
    ui.draggable.remove();
    if ($("#priority_articles_list").children("li").length == 1) {
      $("#priority_articles p").show();
    }
  }
});