Necesito tener los elementos que se arrastran desde el lado izquierdo del área a estar siempre en la parte superior. Y que cuando por primera vez me arrastre desde el área de la izquierda, sin embargo si la dejo en el Cuadro 2 y, a continuación, decidir para arrastrar a Cuadro 1, el artículo que me arrastre aparece debajo de la Casilla 1.

Confundido? Aquí DEMO de lo que estoy hablando.

Sí, he añadido zIndex — no ayuda.

tu enlace no aparece… por favor, vuelva a agregar.
Lo siento, pls tratar ahora.
¿agregar el z-index para la clase/id del elemento iself? La causa más probable de jQuery UI es la adición de otra clase al elemento, si es que se está arrastrando. Tal vez ese es el lugar donde usted necesita cambiar el z-index.
Hmm, interesante, sin embargo. Permítanme que, gracias. — Intentado – no ayuda…
No importa, no he entendido tu pregunta. Esto se aplicaría únicamente para el elemento activo que se está arrastrando. No después de arrastrar.

OriginalEl autor santa | 2011-06-10

2 Comentarios

  1. 7

    Parece que está haciendo algo de edición. 🙂

    La solución es el conjunto de las dos cajas para el mismo índice z, y, a continuación, baje el z-index de los hermanos (el cuadro de la tarjeta NO está de más), utilizando el «inicio» del evento. El «stop» evento debe establecer la igualdad de nuevo. Por supuesto, la posibilidad de arrastrar necesita una mayor z-index.

    También se puede probar el opción de pila.

    EDICIÓN: Ejemplo de trabajo. tenga en cuenta que su realidad, la posibilidad de arrastrar drop evento que se necesita para establecer la z-indexs igual otra vez.

    Usted necesita para hacer estos cambios (quitando los asteriscos en el código, por supuesto):

    En dragdrop-client.js

    //make the new card draggable
        newCard.draggable({
            zIndex: 2500,
            handle: ".card",
            stack: ".card",
            revert: "invalid",
            start: function() {
                $(this).effect("highlight", {}, 1000);
                $(this).css( "cursor","move" );
                    **var $par = $(this).parents('.stack');
                    if ($par.length == 1) {
                        console.log('in stack');
                        $par.siblings().css('z-index', '400');
                    }**
            },
            stop: function() {
                $(this).css("cursor","default");
                    $(".stack").css('z-index', '500');
            }
        });
    
    //make the new stack droppable
        newStack.droppable({
            tolerance: "intersect",
            accept: ".card",
            greedy: true,
            drop: function(event, ui) {
                **$(".stack").css('z-index', '500');**
                card = ui.draggable;
                putCardIntoStack(card,stackId);
            }
        }); 

    En dragdrop-client.css

    .stack {
        width: 300px;
        border: 1px dashed #ccc;
        background-color: #f5f5f5;
        margin: 10px;
        float:left;
        **z-index:500;**
    }
    mi solución sería realiza de forma dinámica. Usted tendría una función para ver si el .card es un niño de .stack. Si es así, usted será menor que el hermano .stack‘s z-index con la ‘start’, evento, etc. Puedo probar y añadir más código exacto más tarde esta noche si usted no puede darse cuenta de eso.
    editado respuesta a dar ejemplo de trabajo. Déjame saber cómo va!
    mi ejemplo falla en ie porque no tengo /incl/pro/dragdrop-server.php en mi ejemplo. Su causa de su función ajax de jquery en la línea 147 a la bomba. Mira mi ejemplo en firefox o chrome, funciona. Trate de mis cambios en la suya, en ie; también funcionará.
    parece que tomó su demo abajo. Por favor me dan el cheque si esto ayudó…
    Tuve una situación similar. @two7s_clash utilizando tu consejo yo simplemente {hizo que todos se pueden arrastrar a conseguir un z-index de 100, a continuación, hacer $(this) tiene un z-index de 200} en mousedown. Gracias!

    OriginalEl autor two7s_clash

  2. 0

    Hago lo two7s_clash recomienda para mi arrastrar-soltar cuando los elementos se insertan de forma dinámica. Tenemos algunos de los elementos que se inserta a través de una tela y, a continuación, queremos arrastrar y soltar encima de todo:

    start: function(e) { $('element').css('z-index', -1)}
    stop:  function(e) { $('element').css('z-index', 0)}

    OriginalEl autor Rob R

Dejar respuesta

Please enter your comment!
Please enter your name here