jQueryUI 和 Bootstrap 按钮

Question

我正在使用：bootstrap.min、jquery-1.10.2、jquery-ui-1.10.4.min。使用这些库我想提供拖放功能。Bootstrap 按钮应该是可拖动的，但事实并非如此。控制台日志清晰。jQuery 和 jQuery UI 已加载并可以工作。

脚本：

<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>

网页：

<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。

根据该选项的 APICancel：

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

如果您希望能够在按钮上使用 Draggable，则必须通过指定来覆盖取消选项cancel: false

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

jsFiddle 中的工作演示

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

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

锚测试小提琴

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