How to select items from a list and fill another div with selected items using Jquery?

Asked

Viewed 820 times

0

In the div-students I have a list, and when clicking on each student I would like to fill in another div-group I will put inside a form to register a group of students, IE, the user will select the students you want and each click this student is sent to another div. Similar to a shopping system you insert items into the cart using Jquery

My code HTML and JQUERY:

      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

      <link rel="stylesheet" href="style.css">

      <script>
      $(function() {
        $( "#selectable" ).selectable();
      });
      </script>

      <body>
        <div class="lista-alunos">
            <h3></i>Alunos</h3>
            <ol id="selectable">
              <li class="ui-widget-content">Aluno 1</li>
              <li class="ui-widget-content">Aluno 2</li>
              <li class="ui-widget-content">Aluno 3</li>
              <li class="ui-widget-content">Aluno 4</li>
              <li class="ui-widget-content">Aluno 5</li>
              <li class="ui-widget-content">Aluno 6</li>
              <li class="ui-widget-content">Aluno 7</li>
              <li class="ui-widget-content">Aluno 8</li>
              <li class="ui-widget-content">Aluno 9</li>
              <li class="ui-widget-content">Aluno 10</li>
              <li class="ui-widget-content">Aluno 11</li>
              <li class="ui-widget-content">Aluno 12</li>
              <li class="ui-widget-content">Aluno 13</li>
              <li class="ui-widget-content">Aluno 14</li>
            </ol>
        </div>

        <div class="lista-grupo">
          <h3>Grupo</h3>

        </div>
      </body>

CSS:

      #feedback { 
        font-size: 1.4em; 
      }
      #selectable .ui-selecting { 
        background: #FECA40; 
      }
      #selectable .ui-selected { 
        background: #F39814; 
        color: white; 
      }
      #selectable { 
        list-style-type: none; 
        margin: 0; 
        padding: 0; 
        /* SCROLL */
        height: 290px;
        overflow: auto;
      }
      #selectable li { 
        background-color: #ECECEC;
        border: 1px solid #ccc;
        margin: 3px; 
        padding: 0.4em; 
        font-size: 1.4em; 
        height: 18px; 
        cursor: pointer;
      }

      .lista-alunos, .lista-grupo{
        position: relative;
        float: left;
        display: block;
        width: 300px;
        height: 350px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
      }
      .lista-grupo{
        margin-left: 15px;
      }
php jquery html5 css3 jquery-ui

2 answers

0


I did as follows, I added a click event to the list elements $(".ui-widget-content") and added a <ol class="grupo-alunos"></ol> in the div of class="lista-grupo".

Jquery

$(function() {
  $( ".ui-widget-content" ).click(function(){ 
    $(".lista-grupo").append(this);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div class="lista-alunos">
            <h3></i>Alunos</h3>
            <ol id="selectable">
              <li class="ui-widget-content">Aluno 1</li>
              <li class="ui-widget-content">Aluno 2</li>
              <li class="ui-widget-content">Aluno 3</li>
              <li class="ui-widget-content">Aluno 4</li>
              <li class="ui-widget-content">Aluno 5</li>
              <li class="ui-widget-content">Aluno 6</li>
              <li class="ui-widget-content">Aluno 7</li>
              <li class="ui-widget-content">Aluno 8</li>
              <li class="ui-widget-content">Aluno 9</li>
              <li class="ui-widget-content">Aluno 10</li>
              <li class="ui-widget-content">Aluno 11</li>
              <li class="ui-widget-content">Aluno 12</li>
              <li class="ui-widget-content">Aluno 13</li>
              <li class="ui-widget-content">Aluno 14</li>
            </ol>
        </div>

        <div class="lista-grupo">
          <h3>Grupo</h3>
          <ol id="grupo-alunos">
          	
          </ol>

        </div>
      </body>

-1

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
    <style type="text/css">
              #feedback { 
        font-size: 1.4em; 
      }
      #selectable .ui-selecting { 
        background: #FECA40; 
      }
      #selectable .ui-selected { 
        background: #F39814; 
        color: white; 
      }
      #selectable { 
        list-style-type: none; 
        margin: 0; 
        padding: 0; 
        /* SCROLL */
        height: 290px;
        overflow: auto;
      }
      #selectable li { 
        background-color: #ECECEC;
        border: 1px solid #ccc;
        margin: 3px; 
        padding: 0.4em; 
        font-size: 1.4em; 
        height: 18px; 
        cursor: pointer;
      }

      .lista-alunos, .lista-grupo{
        position: relative;
        float: left;
        display: block;
        width: 300px;
        height: 350px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
      }
      .lista-grupo{
        margin-left: 15px;
      }
    </style>
    <script>
    $(document).ready(function() {
        $("#selectable").selectable({
            stop: function(e, ui) {
                $(".ui-selected").each(function(index, el) {
                    var id = $(el).attr('id');
                    var txt = $(el).html();
                    var li = $("<li />", {
                        "id":id,
                    }).html(txt);

                    $(li).appendTo('.lista-grupo');
                });
            },
        });
    });   
    </script>
</head>

<body>
    <div class="lista-alunos">
        <h3></i>Alunos</h3>
        <ol id="selectable">
            <li class="ui-widget-content" id="Aluno 1">Aluno 1</li>
            <li class="ui-widget-content" id="Aluno 2">Aluno 2</li>
            <li class="ui-widget-content" id="Aluno 3">Aluno 3</li>
            <li class="ui-widget-content" id="Aluno 4">Aluno 4</li>
            <li class="ui-widget-content" id="Aluno 5">Aluno 5</li>
            <li class="ui-widget-content" id="Aluno 6">Aluno 6</li>
            <li class="ui-widget-content" id="Aluno 7">Aluno 7</li>
            <li class="ui-widget-content" id="Aluno 8">Aluno 8</li>
            <li class="ui-widget-content" id="Aluno 9">Aluno 9</li>
            <li class="ui-widget-content" id="Aluno 10">Aluno 10</li>
            <li class="ui-widget-content" id="Aluno 11">Aluno 11</li>
            <li class="ui-widget-content" id="Aluno 12">Aluno 12</li>
            <li class="ui-widget-content" id="Aluno 13">Aluno 13</li>
            <li class="ui-widget-content" id="Aluno 14">Aluno 14</li>
        </ol>
        <a id="finalizar" title="">Finalizar</a>
    </div>
    <div class="lista-grupo">
        <h3>Grupo</h3>
    </div>
</body>

</html>

Browser other questions tagged php jquery html5 css3 jquery-ui

You are not signed in. Login or sign up in order to post.