Draggable Buttons

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container">
   <div class="row">
      <div class="col-sm-6 col-md-6">
         <div class="panel panel-info text-center">
            <div class="panel-heading  text-center">Buttons</div>
            <div class="btn-group-vertical">
               <button class="btn btn-default verticalButton">B1</button>
               <button class="btn btn-default verticalButton">B2</button>
               <button class="btn btn-default verticalButton">B3</button>
            </div>
         </div>
      </div>
   </div>
</div>





<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Post: <a href='http://stackoverflow.com/q/23503477/1366033'>jQueryUI and Bootstrap buttons</a><br/>
    Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>

JavaScript

$(document).ready(function() {
    $('.btn.verticalButton').draggable({
        cancel: false,
        connectToSortable: '.container',
        containment: 'document',
        helper: 'clone'
    });
    $("#droppable").droppable({
        drop: function (event, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();
        }
    });
});