Estoy tratando de combinar la posibilidad de arrastrar el panel (en la parte superior), y un ordenable panel (parte inferior).

Arrastrando funciona bien, pero la clasificación falla.

Aquí está mi JS violín:
http://jsfiddle.net/dmUKY/9/

Tanto de arrastrar y colocar y ordenar las funciones comparte la droppable:drop función.
A la hora de ordenar los elementos, la función tiene que reemplazar el objeto seleccionado.

 drop: function (event, ui) {
    //alert($(this).parent().html());
    //alert($(ui.helper).attr('class'));
    var obj;
    if ($(ui.helper).hasClass('draggable')) {
        //alert('draggable');
      obj = $(ui.helper).clone();  
      obj.removeClass('draggable').addClass('editable')
      //obj.addClass('droppable');
      $(this).parent().append(obj);

    }


    //alert($(this).parent().html());
}

¿Cómo debo combinar estas dos funciones?

OriginalEl autor dams | 2013-08-23

2 Comentarios

  1. 4

    Cambiar el código para esto debe hacer el truco:

    obj.removeClass('draggable').addClass('editable').removeAttr('style');
    //obj.addClass('droppable');
    $(this).append(obj);

    de verificación en el violín: http://jsfiddle.net/dmUKY/11/

    gracias! ¿Qué debo hacer si hay 2 que se puede ordenar por separado de las áreas ? puedo intercambio de elementos entre los ? JSfiddle: jsfiddle.net/dmUKY/11
    actualizado enlace : jsfiddle.net/dmUKY/16
    probar este jsfiddle.net/dmUKY/18
    ra_htial es la mejor 🙂

    OriginalEl autor trrrrrrm

  2. 16
    $("#sortable").sortable({
        revert: true,
        stop: function(event, ui) {
            if(!ui.item.data('tag') && !ui.item.data('handle')) {
                ui.item.data('tag', true);
                ui.item.fadeTo(400, 0.1);
            }
        }
    });
    $("#draggable").draggable({
        connectToSortable: '#sortable',
        helper: 'clone',
        revert: 'invalid'
    });
    $("ul, li").disableSelection();

    DEMO JSFIDDLE

    Supongo que esto es lo que estabas buscando !!

    OriginalEl autor Vaibs_Cool

Dejar respuesta

Please enter your comment!
Please enter your name here