Arrastrable + Clasificable & amp; Divs desplazables

StackOverflow https://stackoverflow.com/questions/1016559

Pregunta

Tengo un contenedor con una lista de elementos arrastrables y un contenedor con una lista de elementos ordenables. Los draggables & amp; la lista ordenable está conectada, lo que permite al usuario arrastrar clones de los draggables a la lista ordenada.

Los elementos que se pueden arrastrar aparecen en una lista vertical, sin embargo, los elementos que se pueden ordenar aparecen en una lista horizontal, lo que se consigue flotando hacia la izquierda. El contenedor de los elementos ordenables tiene su desbordamiento establecido en automático, lo que resulta en una barra de desplazamiento horizontal si el contenido se desborda. Los dos contenedores aparecen uno al lado del otro, los draggables a la izquierda & amp; los ordenables a la derecha.

El problema que estoy experimentando es cuando el contenedor de elementos ordenables se desplaza hacia la derecha, arrastrando desde el contenedor de los draggables dispara inmediatamente los eventos de los ordenables. Parece que el contenido del contenedor de los ordenables se mueve detrás del contenedor de los draggables.

Aquí está mi código: 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Sortables in scrollable divs</title>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function() {
            $("#sortable").sortable({
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("sortable \"" + ui.helper.text() + "\" drag stopped");
                    if (ui.item !== null) console.log("sortable item \"" + ui.item.text() + "\" drag stopped");
                }
            });

            $("#sortable").sortable("disable");

            $("#draggable li").draggable({
                connectToSortable: '#sortable',
                helper: 'clone',
                revert: 'invalid',
                cursor: "default",
                cursorAt: { top: -5, left: -5 },
                start: function(event, ui) {
                    if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag start");
                },
                stop: function(event, ui) {
                    if (ui.helper !== null) console.log("draggable \"" + ui.helper.text() + "\" drag stopped");
                }
            });

            $("#container2").mouseenter(function() {
                console.log("enter sortable container");
                $("#sortable").sortable("enable");
            }).mouseleave(function() {
                console.log("leaving sortable container");
                $("#sortable").sortable("disable");
            });

            $("#draggable, #sortable").disableSelection();
        });
    </script>
    <style type="text/css">
        html, body, p, td, th, li, input, select, option, textarea
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 11px;
            color:#343E41;
        }

        .wrapper
        {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            height: expression(this.parentNode.offsetHeight + "px");
        }

        .scroll-wrapper
        {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: auto;
            height: expression(this.parentNode.offsetHeight + "px");
        }

        #container1
        {
            float:left;
            width:200px;
            height:400px;
            overflow:auto;
            border:solid #000 1px;
            margin:5px;
        }

        #container2
        {
            float:left;
            width:600px;
            height:400px;
            overflow:auto;
            border:solid #000 1px;
            margin:5px;
        }

        ul#draggable
        {
            padding:0;
            margin:0;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
        }

        ul#draggable li
        {
            display:block;
            margin:5px;
            border:solid #000 1px;
            height:50px;
            width:150px;
        }

        ul#sortable
        {
            padding:0;
            margin:0;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
            height:380px;
            width:744px;
        }

        ul#sortable li
        {
            display:block;
            float:left;
            margin:5px;
            border:solid #000 1px;
            height:370px;
            width:50px;
            text-align:center;
        }
    </style>
</head>
<body>
    <form id="form1" action="">
        <div id="container1">
            <ul id="draggable">
                <li>1A</li>
                <li>2A</li>
                <li>3A</li>
                <li>4A</li>
                <li>5A</li>
                <li>6A</li>
                <li>7A</li>
                <li>8A</li>
                <li>9A</li>
                <li>10A</li>
                <li>11A</li>
                <li>12A</li>
            </ul>
        </div>
        <div id="container2">
            <ul id="sortable">
                <li class="ui-state-default">1</li>
                <li class="ui-state-default">2</li>
                <li class="ui-state-default">3</li>
                <li class="ui-state-default">4</li>
                <li class="ui-state-default">5</li>
                <li class="ui-state-default">6</li>
                <li class="ui-state-default">7</li>
                <li class="ui-state-default">8</li>
                <li class="ui-state-default">9</li>
                <li class="ui-state-default">10</li>
                <li class="ui-state-default">11</li>
                <li class="ui-state-default">12</li>
            </ul>
        </div>
    </form>
</body>

¿Cómo puedo evitar que los eventos ordenables se activen hasta que el elemento se arrastre sobre el contenedor ordenable?

Gracias de antemano

¿Fue útil?

Solución

Ha pasado mucho tiempo desde que publiqué esta pregunta y desde entonces, nuevas versiones de jQuery & amp; Se ha lanzado la interfaz de usuario jQuery.

Además, el equipo de desarrollo de jQuery UI agregó un ejemplo de draggables conectados con ordenables, se agregaron.

Así que actualicé mi código de muestra original y lo modifiqué para que coincida con mi escenario. Quería una sección ordenable de desplazamiento horizontal que se expandirá automáticamente cuando se agreguen nuevos elementos.

Mi ejemplo a continuación ha resuelto mi problema y el código se ve mucho más limpio & amp; más simple: 

$(function () {
            $("#sortable").sortable({
                revert: true,
                start: function (event, ui) {
                    $(this).width($(this).width() + ui.helper.width() + 12);
                },
                stop: function (event, ui) {
                    var w = 0;
                    $(this).children("li").each(function () {
                        w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
                    });
                    $(this).width(w);
                }
            });

            var w = 0;
            $("#sortable").children("li").each(function () {
                w += $(this).width() + parseInt($(this).css("margin-left")) + parseInt($(this).css("margin-right")) + 2;
            });
            $("#sortable").width(w);

            $("#draggable li").draggable({
                connectToSortable: "#sortable",
                helper: "clone",
                revert: "invalid"
            });
            $("ul, li").disableSelection();
        });
html, body, p, td, th, li, input, select, option, textarea
                {
                        font-family: Verdana, Arial, Helvetica, sans-serif;
                        font-size: 11px;
                        color:#343E41;
                }

                .wrapper
                {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        height: expression(this.parentNode.offsetHeight + "px");
                }

                .scroll-wrapper
                {
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: auto;
                        height: expression(this.parentNode.offsetHeight + "px");
                }

                #container1
                {
                        float:left;
                        width:200px;
                        height:400px;
                        overflow:auto;
                        border:solid #000 1px;
                        margin:5px;
                }

                #container2
                {
                        float:left;
                        width:600px;
                        height:400px;
                        overflow:auto;
                        border:solid #000 1px;
                        margin:5px;
                }

                ul#draggable
                {
                        padding:0;
                        margin:0;
                        list-style-image:none;
                        list-style-position:outside;
                        list-style-type:none;
                }

                ul#draggable li
                {
                        display:block;
                        margin:5px;
                        border:solid #000 1px;
                        height:50px;
                        width:150px;
                }

                ul#sortable
                {
                        padding:0;
                        margin:0;
                        list-style-image:none;
                        list-style-position:outside;
                        list-style-type:none;
                        height:380px;
                }

                ul#sortable li
                {
                        display:block;
                        float:left;
                        margin:5px;
                        border:solid #000 1px;
                        height:370px;
                        width:50px;
                        text-align:center;
                }
           <script type="text/javascript" language="JavaScript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
 
    <form id="form1" action="">
    <div id="container1">
    <ul id="draggable">
    <li>1A</li>
    <li>2A</li>
    <li>3A</li>
    <li>4A</li>
    <li>5A</li>
    <li>6A</li>
    <li>7A</li>
    <li>8A</li>
    <li>9A</li>
    <li>10A</li>
    <li>11A</li>
    <li>12A</li>
    </ul>
    </div>
    <div id="container2">
    <ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
    <li class="ui-state-default">6</li>
    <li class="ui-state-default">7</li>
    <li class="ui-state-default">8</li>
    <li class="ui-state-default">9</li>
    <li class="ui-state-default">10</li>
    <li class="ui-state-default">11</li>
    <li class="ui-state-default">12</li>
    </ul>
    </div>
    </form>

Pensé que alguien, en algún lugar, podría hacer lo mismo y necesita ayuda: D

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top