1

me han pasado una ventana que tiene un carrusel de usuarios en ASPx y unas tareas a realizar y quieren que cada elemento del carrusel sea arrastrable, tipo Drag and Drop y cuando se posicione encima de una tarea, se asocie dicho usuario con la tarea y yo soy front y no sé ASPx.

ASPx

<div class="col-xs-12 col-md-4 clearfix pull-right">
    <dxc:ASPxCallbackPanel ID="cbRecursos" ClientInstanceName="cbRecursos" runat="server" settingsloadingpanel-enabled="false">
        <PanelCollection>
            <dxc:PanelContent>
                <div id="Panel_Recursos" class="Panel_Recursos" ClientInstanceName="Panel_Recursos" runat="server" visible="false"></div>
            </dxc:PanelContent>
        </PanelCollection>
    </dxc:ASPxCallbackPanel>
</div>

Aspx.VB

If ds.Tables(0).Rows.Count > 0 Then
    Panel_Recursos.Controls.Clear()
        For Each fila As DataRow In ds.Tables(0).Rows
            contenidoPopover = ""
            Dim btnPersonal As New ASPxButton
            Dim img As New ASPxBinaryImage

            btnPersonal.ID = fila("PERSONAL_ID")
            btnAcciones.ClientInstanceName = "btn_Recurso_" & fila("PERSONAL_ID")
            btnPersonal.Text = fila("Acronimo")
            btnPersonal.Attributes.Add("data-toggle", "popover")
            btnPersonal.Attributes.Add("EncodeHtml", "True")
            btnPersonal.Attributes.Add("RenderMode", "Link")
            btnPersonal.Attributes.Add("draggable", "True")

            contenidoPopover &= "<div class='strNamePersonal'>" & fila("PERSONAL") & " </div>"

            btnPersonal.Attributes.Add("data-content", contenidoPopover)

            If fila("RESPONSABLE") = True Then
                btnPersonal.CssClass = "iconmoon-user4 ico-16 icono-btn-personal" 'Jefe Proyecto
            Else
                btnPersonal.CssClass = "iconmoon-user ico-16 icono-btn-personal"  'Personal
            End If

            btnPersonal.Width = 30
            btnPersonal.ToolTip = fila("PERSONAL")

            If Trim(hPersonal_id.Value) <> "" Then
                If Trim(hPersonal_id.Value) = fila("PERSONAL_ID") Then
                    btnPersonal.Attributes.Add("data-class", "active")
                Else
                    'btnPersonal.ForeColor = System.Drawing.Color.Black
                End If
            End If

            btnPersonal.AutoPostBack = False
            btnPersonal.ClientSideEvents.Click = "function(s, e) { filtrarRecurso(" & fila("PERSONAL_ID") & ");}"
            Panel_Recursos.Visible = True
            Panel_Recursos.Controls.Add(btnPersonal)
        Next
    End If

Este es el VB donde carga y pinta los usuarios por ventana

IMG informativa de lo que necesito:

introducir la descripción de la imagen aquí

El ASPX muestra los usuarios (JAL, JGF...) y necesito que se pueda clicar sobre ellos y arrastrarlos hasta una de las tareas como muestro en la imagen.

Si fuese HTML me sería más facil ya que con Bootstrap y/o JQuery lo podría hacer, al intentar poner el html que me sale al inspeccionar elemento para así por lo menos intentar hacer algo para luego asociarlo al ASPx pero no puedo hacerlo así porque no me carga la pagina.

Cómo podría hacer que cada usuario que me carga se pueda arrastrar y cuando suelte vuelva a su sitio?

Muchas gracias

4
  • Esta algo complejo eso, ¿Quieres que la cajita de user se quede dentro de la caja de tareas?
    – Alvarez
    Commented el 21 mar. 2018 a las 14:05
  • No, lo que necesito es que cuando arrastre la caja del usuario y la coloque encima de la tarea y suelte, se asocie el usuario a dicha tarea, pero que el usuario se quede donde está para poder asociar dicho usuario a las tareas no tengan usuario asociado, ahora tengo que cuando se clickea en la tarea se abre la ventana para modificar la tarea y también añadir el usuario pero quieren más facilidades como esa para añadir usuario si no tiene uno asociado.
    – derek
    Commented el 21 mar. 2018 a las 14:39
  • Pero quieres que solo sea a nivel de front o tienes alguna tabla en la base de datos que amarre usuario-tarea?
    – Alvarez
    Commented el 21 mar. 2018 a las 14:46
  • yo necesito solo la parte front, luego la parte back la tendrá que hacer otro que yo de VB y/o ASPx para la llamada a BBDD para hacer el Insert, el Upload o lo que tengan que hacer que yo de la parte back no controlo
    – derek
    Commented el 21 mar. 2018 a las 14:50

1 respuesta 1

0

Esta podría ser una idea valida.

Usamos Esta librería de Jquery

#draggable {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px 10px 10px 0;
}

#droppable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Droppable - Revert draggable position</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function() {
      $("#draggable").draggable({
        revert: "valid"
      });


      $("#droppable").droppable({
        classes: {
          "ui-droppable-active": "ui-state-active",
          "ui-droppable-hover": "ui-state-hover"
        },
        drop: function(event, ui) {

          $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html($("#draggable p").text());
        }
      });
    });
  </script>
</head>

<body>

  <div id="draggable" class="ui-widget-content">
    <p>Usuario</p>
  </div>


  <div id="droppable" class="ui-widget-header">
    <p></p>
  </div>


</body>

</html>

8
  • Estoy intentando adaptarlo a mi código, pero lo tengo bastante complicado. Tengo todo repartido en 2 archivos el aspx y el aspx.vb, intento pillar los id para que por lo menos pueda arrastrar los usuarios pero no lo consigo, el primer código que puse es el que está en el aspx y el segundo código en el aspx.vb que según me parece es donde hace el bucle de los usuarios que pasa al ASPx para pintarlo por ventana y los usuarios son botones que tienen más funcionalidades como por ej la de filtrar las tareas por el usuario que se pinche y esa funcionalidad no la puedo eliminar
    – derek
    Commented el 21 mar. 2018 a las 16:02
  • Si esos botones tienen una clase puedes hacer $(".ClaseDelBoton").draggable({ revert: "valid" }); para que puedas arrastrar los botones, y lo mismo puedes hacer con las cajas de las tareas para que capturen los textos de los botones. Mas no puedo ayudarte porque a ciegas es dificil.
    – Alvarez
    Commented el 21 mar. 2018 a las 16:08
  • sería modificar el $("#IdDelDiv").draggable({ revert: "valid" }); por $(".ClaseDelBoton").draggable({ revert: "valid" }); o sería añadirla?
    – derek
    Commented el 21 mar. 2018 a las 16:16
  • Como se estan creando los div o botones que tienen la info del usuario?
    – Alvarez
    Commented el 21 mar. 2018 a las 17:38
  • Están creados en 2 archivos, el .aspx que pongo es el codigo donde los pinta en la parte front y en aspx.vb es donde hace el Select correspondiente para crearlos (img, nombre, acronimo etc...), monta el html y los pasa al aspx para mostrarlos por ventana, por lo menos es lo que me da a entender el código
    – derek
    Commented el 22 mar. 2018 a las 7:32

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.