jQueryUI和Bootstrap按钮

Question

我正在使用：bootstrap.min，jquery-1.10.2，jquery-ui-1.10.4.min。 使用这些库我想提供拖放功能。 Bootstrap按钮应该是可拖动的，但它们不是。控制台日志很明确。 jQuery＆amp; jQuery UI已加载＆amp;的工作原理。

脚本：

<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

默认情况下，jQuery UI不会向button类型的元素添加可拖动。

根据API for the Cancel Option：

  

防止从指定元素开始拖动   默认："input,textarea,button,select,option"

如果您希望能够在按钮上使用Draggable，则必须通过指定cancel: false

来覆盖取消选项

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

Working Demo in jsFiddle

或者您可以尝试将button元素更改为a nchor元素：

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

Anchor Test Fiddle

此外，您正在使用的helper选项功能似乎干扰了拖动操作。
要使用connectToSortable，您应该使用helper: "clone"。

Answer 2

如果您确实要拖动button，可以将其放入div并将{cancel:false}选项添加到draggable功能。例如：

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

然后

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

Here the fiddle