Necesito usar jQuery interfaz de usuario para restringir el área de contención para la posibilidad de arrastrar el objeto con alguna restricción adicional. Necesito evitar la posibilidad de arrastrar el elemento a partir de la superposición con otros elementos dentro del mismo contenedor. Necesito para permitir el movimiento en «moveInHere de la zona», pero no «butNotHere de la zona». Es posible?

<div id="moveInHere">

    <div id="dragMe"> </div>

    <div id="butNotHere"> </div>

</div>


<script type="text/javascript">

    $("#dragMe").draggable({
        containment: "#moveInHere"
    });

</script>

OriginalEl autor the.ufon | 2012-07-12

2 Comentarios

  1. 19

    De Edición: Nueva Solución

    He encontrado un plugin de este tipo, llamado JQuery interfaz de usuario que se pueden arrastrar Colisión. El uso de este, la implementación de su funcionalidad deseada se convierte en trivial. Consulte el siguiente jsFiddle ejemplo: http://jsfiddle.net/q3x8w03y/1/ (Esto utiliza la versión 1.0.2 de JQuery interfaz de usuario que se pueden arrastrar Colisión, junto con JQuery 1.7.2 y JQueryUI 1.1.18.)

    Aquí está el código:

    $("#dragMe").draggable({
        obstacle: "#butNotHere",
        preventCollision: true,
        containment: "#moveInHere"
    });

    Vieja Solución

    La siguiente debe funcionar. Tiene un fallo, aunque. Una vez que los divs chocan, se tiene que «regrab» el div se está arrastrando, que puede ser un poco molesto. Tal vez alguien se sabe cómo arreglar esto. Usted puede ver mi jsFiddle ejemplo aquí: http://jsfiddle.net/MrAdE/8/

    var prevOffset, curOffset;
    $("#dragMe").draggable({
        drag: function(e,ui) {
            prevOffset= curOffset;
            curOffset= $.extend({},ui.offset);
            return true;
        }
    });
    
    $("#butNotHere").droppable({
        greedy: true,
        over: function(e,ui) {
            ui.helper.offset(curOffset= prevOffset).trigger("mouseup");
        },
        tolerance: "touch"
    });​
    +1 listo para usar droppable‘s over evento que desencadene un mouseup.
    ¿Sabes si la nueva solución es compatible con JQuery 1.10? Me estoy poniendo de los errores.
    Este jsfiddle no funciona más. La respuesta debe ser actualizado con los detalles de las versiones etc
    JSFiddle quitado el tercero archivos que he subido para el ejemplo. Parece que no se puede cargar la tercera parte de los archivos de más, así que me las han incorporado en la sección de JavaScript. Aquí está el nuevo ejemplo: jsfiddle.net/q3x8w03y/1 voy a actualizar la respuesta con las versiones.
    Nueva solución no va a trabajar con jQuery UI 1.10 y mayor

    OriginalEl autor ihake

  2. 6

    Esto me tomó un poco de tocar el violín. Básicamente he creado un droppable sobre el elemento que queremos evitar, a continuación, establezca un valor booleano, cuando el arrastre sobre él. Uso, a continuación, que en un indocumentados revertir la función de anular para cancelar la gota. Esto solo funciona si #dragMe es totalmente más #butNotHere:

    $(document).ready(function(){
        var shouldCancel = false;
        $('#dragMe').draggable({
            containment: '#moveInHere',
            revert: function(){
                if (shouldCancel) {
                    shouldCancel = false;
                    return true;
                } else {
                    return false;
                }
            }
        });
        $('#butNotHere').droppable({
            over: function(){
                shouldCancel = true;
            },
            out: function(){
                shouldCancel = false;
            }
        });
    });

    Echa un vistazo a la demo y se siente libre para jugar con él: http://jsfiddle.net/H59Nb/31/

    OriginalEl autor Milimetric

Dejar respuesta

Please enter your comment!
Please enter your name here