jQueryUI and Bootstrap buttons

Question

I'm using: bootstrap.min, jquery-1.10.2, jquery-ui-1.10.4.min. Using these libs I want to provide drag'n'drop feature. Bootstrap buttons should be draggable, but they aren't. Console log is clear. jQuery & jQuery UI are loaded & works.

Script:

<script type="text/javascript">

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

</script>

Html:

<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 verticalButton">B1</button>
               <button class="btn verticalButton">B2</button>
               <button class="btn verticalButton">B3</button>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

By Default, jQuery UI will not add draggable to elements of type button.

According to the API for the Cancel Option:

Prevents dragging from starting on specified elements.
Default:"input,textarea,button,select,option"

If you'd like to be able to use Draggable on buttons, you have to override the cancel option by specifying cancel: false

$('.btn.verticalButton').draggable({cancel:false});

Working Demo in jsFiddle

Or you can try changing your button element to an anchor element:

<a class="btn btn-default">B1</a>

Anchor Test Fiddle

Also, the helper option function you're using seems to be interfering with the drag operation.
In order to use connectToSortable, you should use helper: "clone".

Answer 2

If you really want to drag a button, you can throw it into a div and add the {cancel:false} option to the draggable function. For example:

<div class="verticalButton"><button class="btn">B1</button></div>

and then

$('.verticalButton').draggable({cancel:false});

Here the fiddle