Me preguntaba cuál sería la mejor manera de implementar algún tipo de «arrastrar y soltar» de la interfaz de usuario?

Lo que quiero decir es que habrá una página principal y haga clic en cada enlace (por ejemplo. otras secciones como acerca de, galería, formulario de contacto) abriría una nueva arrastrar y soltar un elemento en la parte superior de la página principal. Algo así como el escritorio de windows, donde puede mover las ventanas de aplicación alrededor de la pantalla.

Sería mejor llamar a diferentes funciones con AJAX al hacer clic en un enlace? Como «galería» el enlace de la llamada galería de la función y recuperar generado dinámicamente el contenido de esa «ventana» con la llamada AJAX y, a continuación, sólo tienes que cargar las cosas que en un div?
O algún otro tipo de enfoque se adapten mejor para esto?

Espero haber sido capaz de explicar esto con suficiente claridad. Estoy buscando un «patrón de diseño» para implementar esto. Todas las sugerencias son bienvenidas! 🙂

  • Estás buscando un kit de herramientas que le proporciona DnD widgets? O te preguntan si es una buena idea utilizar DnD elementos de la interfaz?
  • Nono, solo estoy buscando algunas sugerencias sobre cómo aplicar en la práctica este tipo de diseño. Debo llamar a funciones con ajax y rellenar DnD elementos de esa manera o debo ir con alguna otra manera con esto?
InformationsquelleAutor Nikkeloodeni | 2010-04-20

5 Comentarios

  1. 5

    Primero me sugieren el uso de jQuery para crear tu arrastrar y soltar

    http://jqueryui.com/demos/draggable/

    Estoy seguro de que usted puede encontrar muchos de arrastrar y soltar ejemplos de jQuery

    Tengo uso yahoo biblioteca de javascript de arrastrar y soltar – antes de aprender jQuery.
    Aquí hay algunos ejemplos en yahoo.
    http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html

    Espero que esta ayuda para empezar.

    También hay todo listo existente casi completa de sistemas de interfaz de usuario en internet.
    Aquí está una http://www.smartclient.com/, pero hay más….

    https://github.com/mui/mochaui

    http://www.extjs.com/

    también esta es una pregunta que puede dar ideas ¿Qué es una buena de Muy Alto nivel de UI framework de JavaScript?

    • Gracias por las sugerencias, pero yo estoy más que se preguntan acerca de la «filosofía de diseño» detrás de este tipo de enfoque. Debo tener sólo una página y, a continuación, rellenar DnD elementos con AJAX o ir con los de alguna otra manera?
    • sí, es mejor tener una página, pero es un poco más difícil de ejecutar el JavaScript después de que el ajax actualizaciones, independientemente de cómo se puede hacer. Compruebe también que el smartclient.com por las ideas 🙂 y la búsqueda de otros javascript os.
    • Buen enlace, yo uso adjudicar de no molestar en un portal con ExtJs.
  2. 1

    El Dojo Toolkit proporciona una manera fácil de definir DnD elementos.

    <div dojoType="dojo.dnd.Source" class="container">
        <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Epsilon</strong></div>
        <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Zeta</strong></div>
        <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Eta</strong></div>
        <div class="dojoDndItem"><span class="dojoDndHandle">Item</span> <strong>Theta</strong></div>
    </div>

    Ver el ejemplo en vivo. Más sobre Dojo no molestar en DojoCampus.

  3. 0

    La manera que usted describe parece una buena manera de implementar este sí. No sé si hay diferentes enfoques. He implementado algo similar en un sitio anterior (www.ponyhof.be), aunque no hay drop de implementación. Le invitamos a echar un vistazo al código, no es realmente una belleza, pero funciona.

    En este sitio he hecho una página principal con un vacío panel de información (arrastrarse) donde me cargan información a través de Ajax.

    Desde que hice este sitio he aprendido algunas cosas que habría facilitado la aplicación (lo que ahora me haría de manera diferente). Más específico, me gustaría hacer un mejor uso de jQuery delegado del método que se pueden asociar automáticamente las acciones de los vínculos que se cargan a través de ajax (en ponyhof.se me uní a ellos después de ajaxComplete evento fue despedido).

    Pero en general creo que lo que propones suena como una buena manera de construir este tipo de interfaz y no he encontrado algo mejor.

  4. 0

    Me gustaría recomendar el uso de html5 arrastrar y soltar, porque incluso aunque su terrible de la api, se abre un montón de posibilidades, como la mudanza de su «windows» entre las pestañas del navegador, por ejemplo. Hace poco escribí un bajo nivel de arrastrar-y-gota módulo que resume casi todos los de la extraña rareza de html5 drag-and-drop de la api. Todo lo que tendríamos que hacer es crear algo absolutamente posicionado «windows» con algunos de arrastrar la manija y hacer algo como esto:

    var startMouse, startWindow
    dripDrop.drag(dragHandle, {
        dragImage: true, //default drag image
        start: function(setData, e) {
          setData('window', someWindowId)
          startMouse = {x:e.pageX, y:e.pageY}
          startWindow = {x: yourWindow.style.top, y: yourWindow.style.left}
        },
        move: function(position, e) {
          yourWindow.style.top = startWindow.x + (position.x-startMouse.x)
          yourWindow.style.left = startWindow.y + (position.x-startMouse.y)
        }
    })
    dripDrop.drop(myDropzone, {
        drop: function(data, pointer, e) {
            //maybe you want do do something on dropping a window in a particular place?
        }
    })

    Retirar el módulo de aquí: https://github.com/fresheneesz/drip-drop

Dejar respuesta

Please enter your comment!
Please enter your name here