How to make each element of a carousel crawlable

Navigation
1

I have had a window that has a carousel of users in ASPx and some tasks to do and want each element of the carousel to be draggable, Drag and Drop type and when it is positioned on top of a task, that user is associated with the homework and I'm front and I do not know 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

This is the VB where users load and paint by window

IMG informative of what I need:

The ASPX shows the users (JAL, JGF ...) and I need you to click on them and drag them to one of the tasks as shown in the image.

If it were HTML it would be easier for me since with Bootstrap and / or JQuery I could do it, when I try to put the html that I get when I inspect the element in order to at least try to do something and then associate it with the ASPx but I can not do it well because I do not load the page.

How could I make each user that loads me drag and when he returns he returns to his site?

Thank you very much

    
asked by derek 21.03.2018 в 09:56
source

1 answer

0

This could be a valid idea.

We use This Jquery library 

#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>
    
answered by 21.03.2018 в 16:04
How to see data from a table when clicking? message warning NaNs in gammamixEM ()