<div class="dropdown draggable"> <button class="btn btn-dark dropdown-toggle mr-0" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>
<button class="btn btn-dark draggable">Button</button>
<input class="form-control draggable" placeholder="Input" draggable="true">
<div class="form-group draggable"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">@</span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> </div>
<div class="progress-wrapper draggable"> <div class="progress-info"> <div class="progress-label"> <span>Task completed</span> </div> <div class="progress-percentage"> <span>60%</span> </div> </div> <div class="progress"> <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div> </div> </div>
<nav aria-label="..." class="draggable"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" tabindex="-1"> <i class="fa fa-angle-left"></i> <span class="sr-only">Previous</span> </a> </li> <li class="page-item active"><a class="page-link" href="#">1</a></li> <li class="page-item"> <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a> </li> <li class="page-item"> <a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#"> <i class="fa fa-angle-right"></i> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
<button type="button" class="btn btn-primary draggable" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>