javascript - 放置拖动的元素后打印

Question

我需要最后一页(在完成并提交所有内容之后)将学生姓名拖到团队框中进行打印，但是无论我尝试使用显示/ float /位置属性，学生卡在打印时都不会显示这一页。

我的代码使用来自 Interact.io 的 interact_min.js以及 codepen 元素中的内容。

Codepen Project Link

这是将学生分配到团队后的最终页面的屏幕截图。我需要为老师打印出这样的页面。 (类(class)规模各不相同，因此它必须适用于 >= 8 名学生，这将是 #ofTeams >= 2)

我已经尝试了很多来自不同站点的“修复”，但没有一个对我有用。任何帮助表示赞赏。我对编码比较陌生，所以请详细解释。

这是我尝试打印时的样子。 这里我把比例改为30%，可以看到7/8的学生证。

function isInputNumber(){
  const inputNumber = parseInt($("#numberOfStudents").val());
  if(isNaN(inputNumber)) {
    alert('Must input a number');
    return ;
  } else {
    return ;
  }
}

function isNumberBigEnough() {
  const numberS = parseInt($("#numberOfStudents").val());
  if (numberS > 7 && isInputNumber) {
    $('#submitTeams').removeAttr('disabled');
  } else {

    return ;
  }
}

$('#numberOfStudents').keyup(isInputNumber).keyup(isNumberBigEnough);


//First submit function on the team form gives the user a response
$( "#submitTeams" ).click(function( event ) {
  event.preventDefault();
  const numberOfStudents = parseInt($("#numberOfStudents").val());
  const divideByFour = numberOfStudents % 4;
  let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">';
  if (divideByFour === 0){
    responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
  }
  else if (divideByFour === 1) {
    responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.';
  }
  else if (divideByFour === 2) {
    responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.';
  }
  else {
    responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.';
  }
  responseHTML += '</p>';

  $('#studentNumberResponse').css('display', 'block').html(responseHTML);
//second submit function on the team form that makes the second form (studentsForm)
  let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">';
  let i = 0;
  do {
    i++;
    responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
    responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
  } while (i < numberOfStudents);
  responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students or after making any changes to student names.</small> </div>';
  $('#secondsStep').show().html(responseHTMLSecond);
  $('#numberOfStudents').val('');
});
//submit function on the studentsForm to show a response
function addStudentsClicked()
{
  let responseHTMLThird = '<h4 class="card-title">Step 3: Review Class Roster</h4> <p class="card-text">Review your class roster before moving on to the next step. If you need to make any changes, scroll back up to Step 2 and hit submit again after changes have been made.</p>';
  const numberOfStudentsTwo = parseInt($("#numberOverall").text());

  let Students = [];
  for (i =1; i < numberOfStudentsTwo+1; i++) {
      let $firstName = $('#studentFirstName'+i+'').val();
      let $lastName = $('#studentLastName'+i+'').val();
      let $studentLevel = $('#exampleSelect'+i+' :selected').text();
      Students[i] = new Object({$firstName, $lastName, $studentLevel});
    responseHTMLThird += '<p class="studentRosterList">'+Students[i].$firstName+' '+Students[i].$lastName+' : '+Students[i].$studentLevel+'</p>';
    }
  responseHTMLThird += '<button type="submit" class="btn btn-primary" id="submitOverall" onclick="finalSubmit()">Submit</button>';
  alert('Scroll down to review your student roster.');
    $('#studentListResponse').show().html(responseHTMLThird);
}

function finalSubmit () {
  if(confirm("Are you sure everything is correct?") === true){
    $('.hideMe').hide();
    document.location.href = "#top";
    makingCards();
  } else {
    alert('Please make your changes before submitting again.');
  }
}

function makingCards () {
    let makeTeams = '<div class="card-block clearfix" id="makeTeams"><h4 class="card-title">Step 4: Make Teams</h4><p class="card-text">Use your mouse to click and drag students into team groupings. Remember, you don\'t want to have 2 Highs or 2 Lows on a team together.</p></div>';

    const numberOfStudentsTwo = parseInt($("#numberOverall").text());
    const numero = numberOfStudentsTwo % 4;
    let fourthResponse = '';
    let StudentsTwo = [];
    for (i =1; i < numberOfStudentsTwo+1; i++) {
      let $firstName = $('#studentFirstName'+i+'').val();
      let $lastName = $('#studentLastName'+i+'').val();
      let $studentLevel = $('#exampleSelect'+i+' :selected').text();
      StudentsTwo[i] = new Object({$firstName, $lastName, $studentLevel});
      fourthResponse += '<div class="card teamCard draggable" style="width: 10rem;"><div class="card-block teamCard-block">';
      fourthResponse += '<h4 class="card-title teamCard-title">'+ StudentsTwo[i].$firstName;
      fourthResponse += ' '+ StudentsTwo[i].$lastName;
      fourthResponse += '</h4>';
      fourthResponse += '<h6 class="card-subtitle mb-2 text-muted teamCard-subtitle">Student Level: '+ StudentsTwo[i].$studentLevel;
      fourthResponse += '</h6>';
      fourthResponse += '</div></div>';
    }

    $('#top').append(makeTeams);
    teamNumber();
  $('#teamDropBox').after(fourthResponse);
  $('.teamCard').mousedown(handle_mousedown);
}

function teamNumber (numero) {
  const numberOfStudentsTwo = parseInt($("#numberOverall").text());
  let $teamDrops = '<table id="teamDropBox"><tbody>';
  if (numero === 0){
    let $teams = numberOfStudentsTwo / 4;
    for (j=1; j < $teams; j++){
      $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
    }
  } else if (numero === 1) {
    let $teams = (numberOfStudentsTwo - 1) / 4 + 1;
    for (j=1; j < $teams; j++){
      $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
    }
  } else if (numero === 2) {
    let $teams = (numberOfStudentsTwo - 6) / 4 + 2;
    for (j=1; j < $teams; j++){
      $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
    }
  } else {
    let $teams = (numberOfStudentsTwo - 3) / 4 + 1;
    for (j=1; j < $teams; j++){
      $teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
    }
    $teamDrops += '</tbody></table>';
  }

  $('#makeTeams').append($teamDrops);
}

//dragging code from online site - changed to interact.js code below
/*
function handle_mousedown(e){
    window.my_dragging = {};
    my_dragging.pageX0 = e.pageX;
    my_dragging.pageY0 = e.pageY;
    my_dragging.elem = this;
    my_dragging.offset0 = $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }
    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}
*/

//interact.js code here:
// target elements with the "draggable" class
interact('.draggable')
  .draggable({
    // enable inertial throwing
    inertia: true,
    // keep the element within the area of it's parent
    restrict: {
      restriction: "parent",
      restriction: ".dropzone",
      endOnly: true,
      elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    },
    // enable autoScroll
    autoScroll: true,

    // call this function on every dragmove event
    onmove: dragMoveListener,
    });

  function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }

  // enable draggables to be dropped into this
  interact('.dropzone').dropzone({
    // only accept elements matching this CSS selector
    accept: '.draggable',
    // Require a 75% element overlap for a drop to be possible
    overlap: 0.75,

    // listen for drop related events:

    ondropactivate: function (event) {
      // add active dropzone feedback
      event.target.classList.add('drop-active');
    },

    ondropdeactivate: function (event) {
      // remove active dropzone feedback
      event.target.classList.remove('drop-active');
    }
  });

* {
  box-sizing: border-box;
}

#studentNumberResponse, #secondsStep, #studentListResponse {
  display: none;
}

#numberOverall {
  color: #fff;
}

.responseText {
  font-size: 2rem;
}

.teamCard {
  float: right;
  margin: 2rem;
}

table {
  border-collapse: collapse;
  border: 1px solid grey;
  margin: 3rem 0 5rem 1rem;
  float: left;
}

table th {
  border: 1px solid grey;
  vertical-align: center;
  text-align: center;
  width: 18rem;
  padding: 0 5rem;
  text-transform: uppercase;
  font-size: 2rem;
}

table td {
  height: 15rem;
  border: 1px solid grey;
  width: 50rem;
}

@media print {
  body * {
    visibility: hidden;
  }
  #top, #top * {
    visibility: visible;
  }
  #top {
    position: absolute;
    left: 0;
    top: 0;
  }
}

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OnPoint Team Generator</title>
    <meta name="description" content="OnPoint Team Generator">
    <meta name="author" content="MeganRoberts">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>
   <div class="card" id="top">
     <h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
     <div class="card-block hideMe">
       <h4 class="card-title">Step 1: Number of Teams</h4>
       <p class="card-text">How many students do you have in your class?</p>
       <form id="teamForm">
         <div class="form-group">
          <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students" data-toggle="tooltip" data-placement="top" title="Please enter a number larger than 7.">
         </div>
         <button type="submit" class="btn btn-primary" id="submitTeams" disabled>Submit</button>
       </form>
     </div>
   </div>
   <div class="card hideMe">
     <div class="card-block" id="studentNumberResponse">
     </div>
   </div>
   <div id="secondsStep" class="card hideMe">
   </div>
   <div id="listResponse" class="card hideMe">
     <div class="card-block" id="studentListResponse">
     </div>
   </div>
   <script src="interact_min.js"></script>
   <script src="app.js"></script>
 </body>
</html>

Answer 1

我不得不稍微修改一下我的代码才能打印出来。我将拖放更改为 jquery UI 可排序。

Codepen Project

需要 jquery UI 才能完全运行，因此请查看 codepen 链接 -> 下面是“最终”代码

$('#printbtn').hide();
$('#studentNumberResponse').hide();
$('#secondsStep').hide();
$('#listResponse').hide();

//Checking to make sure the input is a number for the rest of the program to work
function isInputNumber(){
  //get user input
  const inputNumber = parseInt($("#numberOfStudents").val());
  //check if input is a number or not
  if(isNaN(inputNumber)) {
    alert('Must input a number');
    return ;
  } else {
    return ;
  }
}
//Checking to make sure that the input is larger than 7 in order to create teams and remove the disabled from the submit button
function isNumberBigEnough() {
  //get user input
  const numberS = parseInt($("#numberOfStudents").val());
  //check to make sure that the number is large enough and then remove the disabled attribute
  if (numberS > 7 && isInputNumber) {
    $('#submitTeams').removeAttr('disabled');
  } else {

    return ;
  }
}
//watching user input to determine if they can submit using the above functions
$('#numberOfStudents').keyup(isInputNumber).keyup(isNumberBigEnough);

//First submit function on the team form gives the user a response of how many teams and what kind of teams depending on their input
$( "#submitTeams" ).click(function( event ) {
  //prevent the window from refeshing after submit event
  event.preventDefault();
  //get user input
  const numberOfStudents = parseInt($("#numberOfStudents").val());
  //DRY for repeated calc
  const divideByFour = numberOfStudents % 4;
  //response to user to tell them the number of teams there will be in their class
  let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">';
  if (divideByFour === 0){
    responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
  }
  else if (divideByFour === 1) {
    responseHTML += 'You will have ' + (numberOfStudents - 5) /4 + ' teams of 4 in your class and one team of 5.';
  }
  else if (divideByFour === 2) {
    responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.';
  }
  else {
    responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.';
  }
  responseHTML += '</p>';
  //show and add the above html to the studentNumberResponse so the user can view the response
  $('#studentNumberResponse').css('display', 'block').html(responseHTML);
//second submit function on the team form that makes the second form (studentsForm) to allow the user to enter student names for sorting later
  //create form to match the student numbered entered
  let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title"><span>Step 2:</span> Enter Your Students</h4> <p class="card-text lightText">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">';
  //needed for the do while loop
  let i = 0;
  do {
    i++;
    //firstname and lastname and level input for each student
    responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
    responseHTMLSecond += '<div class="form-group"> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
  } while (i < numberOfStudents);
  //add submit button to end of the student info form
  responseHTMLSecond += '<button type="submit" class="btn btn-primary opbtn" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students or after making any changes to student names.</small> </div>';
  //show and add the above html for the student info form
  $('#secondsStep').show().html(responseHTMLSecond);
  //clear the number of students input field
  $('#numberOfStudents').val('');
});

//submit function on the studentsForm to show the class roster for a final check before moving on
function addStudentsClicked() {
  //html for the third response
  let responseHTMLThird = '<h4 class="card-title"><span>Step 3:</span> Review Class Roster</h4> <p class="card-text lightText">Review your class roster before moving on to the next step. If you need to make any changes, scroll back up to Step 2 and hit submit again after changes have been made.</p>';
  //hidden numberOfStudents to use in future functions like this one = user input from first step
  const numberOfStudentsTwo = parseInt($("#numberOverall").text());
  //create empty array to add students from student info form
  let Students = [];
  //for each student, create an object with the input information from the previous form
  for (i =1; i < numberOfStudentsTwo+1; i++) {
      let $firstName = $('#studentFirstName'+i+'').val();
      let $lastName = $('#studentLastName'+i+'').val();
      let $studentLevel = $('#exampleSelect'+i+' :selected').text();
      Students[i] = new Object({$firstName, $lastName, $studentLevel});
      //use the data in the array to print out a student roster for the user to review
      responseHTMLThird += '<p class="studentRosterList">'+Students[i].$firstName+' '+Students[i].$lastName+' : '+Students[i].$studentLevel+'</p>';
    }
  //final submit button for the user to click on after reviewing the student roster
  responseHTMLThird += '<button type="submit" class="btn btn-primary opbtn" id="submitOverall" onclick="finalSubmit()">Submit</button>';
  //response appears below the viewport, so an alert to let them know to scroll down
  alert('Scroll down to review your student roster.');
  //show and add response to the page
  $('#listResponse').show();
  $('#studentListResponse').show().html(responseHTMLThird);
}

//asking the user if everything is correct before moving on (cant go back and change)
function finalSubmit () {
  if(confirm("Are you sure everything is correct?") === true){
    //hide forms that are no longer needed
    $('.hideMe').hide();
    //move the user back to the top of the screen
    document.location.href = "#top";
    //cal the function to make the team boxes
    makingTeams();
  } else {
    alert('Please make your changes before submitting again.');
  }
}

//making the teams dropzone containers
function makingTeams () {
  //header for step 4
  let makeTeams = '<div class="card-block clearfix printMe" id="makeTeams"><h4 class="card-title"><span>Step 4:</span> Make Teams</h4><p class="card-text lightText">Use your mouse to click and drag students into team groupings. Remember, you don\'t want to have 2 Highs or 2 Lows on a team together.</p><p id="reminderTeams" class="lightText"></p></div>';
  //get the number of students for creating the correct amount of teams
  const numberOfStudentsTwo = parseInt($("#numberOverall").text());
  //get the remainder to split the loops depending on the number of students
  const numero = numberOfStudentsTwo % 4;
  //start the response string
  let $teamDrops = '';
  //creating the team ul for sorting ui
  if (numero === 0){
    //if equally divisible, then the number divided by four = the number of teams
    let $teams = numberOfStudentsTwo / 4;
    for (let j=1; j < $teams +1; j++){
      $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
    }
  } else if (numero === 1) {
    //if remainder 1, then subtract the one team of five from the total, divide by four to get the number of teams and add back the 1 team of 5
    let $teams = (numberOfStudentsTwo - 5) / 4 + 1;
    for (let j=1; j < $teams +1; j++){
      $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
    }
  } else if (numero === 2) {
    //if remainder 2, then subtract 6 for the two teams of 3 then divide by four to get the number of teams and add back the 2 teams of 3
    let $teams = (numberOfStudentsTwo - 6) / 4 + 2;
    for (let j=1; j < $teams+1; j++){
      $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
    }
  } else {
    //if remainder 3, then subtract the one team of 3 then divide by four and add back the 1 team of 3
    let $teams = (numberOfStudentsTwo - 3) / 4 + 1;
    for (let j=1; j < $teams+1; j++){
      $teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
    }
  }
  //append the instructions to the top
  $('#top').append(makeTeams);
  //append the team ul drops to the top
  $('#top').append($teamDrops);
  //create empty list for student roster to fill into
  let studentRoster = '<ul id="rosterDrag" class="connected printMe"><h4>Student Roster</h4></ul>';
  //append the student roster to the top
  $('#top').append(studentRoster);
  //call the function to make the student roster list for dragging
  makingCards();
}

//making the individual student cards based off of the input from step 2
function makingCards () {
    //get student number info
    const numberOfStudentsTwo = parseInt($("#numberOverall").text());
    //start response html
    let fourthResponse = '';
    //start array to hold student data
    let StudentsTwo = [];
    //start loop to create object for each student
    for (i =1; i < numberOfStudentsTwo+1; i++) {
      let $firstName = $('#studentFirstName'+i+'').val();
      let $lastName = $('#studentLastName'+i+'').val();
      let $studentLevel = $('#exampleSelect'+i+' :selected').text();
      StudentsTwo[i] = new Object({$firstName, $lastName, $studentLevel});
      //add html to the response
      fourthResponse += '<li class="card teamCard'+i+' draggable printMe" style="width: 10rem;">';
      fourthResponse += '<h4 class="card-title teamCard-title">'+ StudentsTwo[i].$firstName;
      fourthResponse += ' '+ StudentsTwo[i].$lastName;
      fourthResponse += '</h4>';
      fourthResponse += '<h6 class="card-subtitle mb-2 text-muted teamCard-subtitle">Student Level: '+ StudentsTwo[i].$studentLevel;
      fourthResponse += '</h6>';
      fourthResponse += '</li>';
    }
  //append the student roster to the ul
  $('#rosterDrag').append(fourthResponse);
  //jquery ui to sort students into teams
  $( function() {
    //making the individual team ul's sortable and connected to each other
    $( ".teamDrops" ).sortable({
      connectWith: ".connected"
    }).disableSelection();
		//making the student roster ul sortable and connected to the others
    $( "#rosterDrag" ).sortable({
      connectWith: ".connected"
    }).disableSelection();
  });
  //get number of teams info from first response
  let reminder = $('.responseText').text();
  //set reminder text to last page
  $('#reminderTeams').text(reminder);
  //show the print button
  $('#printbtn').show();
}
//print the page
function pdfPrint () {
  //hide unwanted elements from the printed page 
  $('#printbtn').hide();
  $('#rosterDrag').hide();
  $('#makeTeams').hide();
  //print the window
  window.print();
}

* {
  box-sizing: border-box;
}

body {
  background-color: lightgrey;
}

#opArrows {
  width: 10rem;
  height: auto;
}

.opbtn {
  color: #fff;
  background-color: #434343;
  border-color: #434343;
}

.opbtn:hover {
  color: #fff;
  background-color: #f5822d;
  border-color: #f5822d;
}

.opbtn:disabled {
  color: #fff;
  background-color: #8c8c8c;
  border-color: #8c8c8c;
}

#title {
  background-color: #0a6c8e;
  color: black;
}

h4 span {
  color: #c4da59;
}

#numberOverall {
  color: #fff;
  display: none;
}

#studentNumberResponse {
  padding-top: 2rem;
  font-size: 1.5rem;
  color: #8c8c8c;
}

 #listResponse p:nth-child(odd) {
  background-color: lightgrey;
}

.studentRosterList {
  width: 25%;
  padding-left: 0.5rem;
}

.lightText {
  color: #8c8c8c;
}

.form-group {
  width: 50%;
}

.teamDrops, #rosterDrag {
  border: 1px solid #eee;
  width: 75%;
  min-height: 5rem;
  list-style-type: none;
  margin: 1rem;
  padding: 1rem 0rem;
}

.teamDrops h4, #rosterDrag h4 {
  margin-bottom: 1.5rem;
  padding-left: 1rem;
}

.draggable {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2rem;
  width: 20rem;
  display: inline-block;
}

#reminderTeams {
  font-weight: bold;
}

#printbtn {
  margin: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>OnPoint Team Generator</title>
    <meta name="description" content="OnPoint Team Generator">
    <meta name="author" content="MeganRoberts">
    <script src="scripts/jquery-3.2.1.min.js"></script>
    <script src="scripts/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="styles/main.css" type="text/css">
  </head>
  <body>
   <div class="card printMe" id="top">
     <h3 id="title" class="card-header" style="text-align: center;"><a href="https://www.onpointclassroom.com"><img src="https://lh6.googleusercontent.com/N8Syzsw2aCV_qrh4pKOFgdamHSgD6gDQvGeKayDJBVfHBK2TMeQ3PnlpJ5BHD5ZVXk7YE4toSpav1co=w1920-h950-rw" alt="OnPoint Arrows" id="opArrows"></a> Team Generator</h3>
     <div id="stepOne" class="card-block hideMe">
       <h4 class="card-title"><span>Step 1:</span> Number of Teams</h4>
       <p class="card-text lightText">How many students do you have in your class?</p>
       <form id="teamForm">
         <div class="form-group">
          <input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students" data-toggle="tooltip" data-placement="top" title="Please enter a number larger than 7.">
         </div>
         <button type="submit" class="btn btn-primary opbtn" id="submitTeams" disabled>Submit</button>
       </form>
     </div>
   </div>
   <div class="card hideMe">
     <div class="card-block" id="studentNumberResponse">
     </div>
   </div>
   <div id="secondsStep" class="card hideMe">
   </div>
   <div id="listResponse" class="card hideMe listResponse">
     <div class="card-block" id="studentListResponse">
     </div>
   </div>
   <footer>
     <div>
       <button type="submit" id="printbtn" class="btn btn-primary btn-lg clearfix opbtn" onclick="pdfPrint()">Print</button>
     </div>
   </footer>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
   <script src="scripts/app.js"></script>
 </body>
</html>