¿Cómo manejar arrastrar y soltar desde ListBox en SAPUI5?

Question

Feb 19, 2014, 07:57 PM

¿Cómo manejar arrastrar y soltar desde ListBox en SAPUI5?

Podría encontrar que arrastrar y soltar son compatibles con SAPUI5. Pero no puedo implementar lo mismo en mi aplicación. Traté de vincularme a los eventos dragstart y dragleave, no funcionan.

Incluso intenté dar un ejemplo en los otros hilos (http://jsbin.com/qova/2/edit?html,output) Este ejemplo tampoco funciona. Puedo seleccionar el elemento de la lista, pero cuando trato de arrastrar, la selección simplemente se extiende y no sucede nada.

Por favor, avíseme si estoy haciendo algo mal.

Aquí está la instantánea HTML

Código fuente

    <!DOCTYPE html>
<html>
<head>
<meta name="description" content="OpenUI5 Listbox Drop and Drag" />
<meta http-equiv='X-UA-Compatible' content='IE=edge' />  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Drag and Drop List Test</title>
<script id='sap-ui-bootstrap' 
    src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
    data-sap-ui-theme="sap_goldreflection"
    data-sap-ui-libs="sap.ui.commons">  
</script>

<script type="text/javascript">
    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
    $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');

    $(function() {
        $("#lb1-list, #lb2-list").sortable({
            connectWith : ".ui-sortable"
        }).disableSelection();
    });

    var city1 = "Berlin|London|New York|Paris|Amsterdam", 
        city2 = "Sydney|Melbourne|Brisbane|Perth|Wollongong";

    var oListBox1 = new sap.ui.commons.ListBox( "lb1", {
        items : $.map(city1.split("|").sort(), function(v, i) {
            return new sap.ui.core.ListItem({ text : v  });
        }), height : "150px"
    });

    var oListBox2 = new sap.ui.commons.ListBox("lb2", {
        items : $.map(city2.split("|").sort(), function(v, i) {
            return new sap.ui.core.ListItem({text : v });
        }), height : "150px"
    });

    var oLayout = new sap.ui.commons.layout.MatrixLayout({layoutFixed : false})
    oLayout.createRow(oListBox1, oListBox2).placeAt("content");
</script>

</head>
<body id="body" class="sapUiBody">
    <div id="content"></div>
</body>
</html>

Actualización: la solución funciona bien si la lista es estática. Pero para las listas dinámicas, donde agregamos filas a través del código, SAPUI5 vuelve a representar la lista y llama a eliminar atributos. Los atributos de eliminación llaman a jQuery-UI remove atributos y elimina los atributos de la clase CSS. Una vez que hice que los elementos de la lista sean estáticos, la función de arrastrar y soltar funciona bien.

¿Existe una solución para arrastrar y soltar cuando la lista es dinámica?

Encontramos una solución Tenga en cuenta que esta solución es para aplicaciones UI5 creadas con vistas y controladores separados.

Para las listas dinámicas, el jquery-ui draggable debe llamar a onAfterRendering. De lo contrario, las clases agregadas por jquery-ui se eliminarán una vez que la lista se vuelva a representar.

Para aplicaciones UI5 en línea como la que publiqué, podemos intentar agregar el delegado de eventos "onAfterRendering" a los controles de la lista.