Rails jQuery UI Draggable 不工作

Question

我似乎无法弄清楚为什么 draggable 在我的 rails 应用程序中不起作用。我正在使用jquery-ui-rails gem。

在我的 javascript 文件中，我包含以下内容：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap
    //  Angular Stuff
//= require angular
//= require ng-rails-csrf
//= require angular-ui-router
//= require angular-cookies
//= require angular-sanitize
//= require restangular
//= require angular-bootstrap
//= require lodash/lodash.js
//= require angular-rails-templates

//= require spin.js/spin.js
//= require angular-spinner
//= require angular-toastr
//= require moment
//= require moment-timezone
//= require angular-moment
//= require ngstorage

// Core App Files
// = require survey_builder_config
//= require_tree ../survey_builder_app

在我的 scss 中：

@import "jqvmap";
@import "jquery-ui";

@import "bootstrap-switch";

在我正在调用的咖啡脚本文件中：

$scope.refreshOffers = ->
    console.log "refreshOffers"

    $("#drag-me").draggable()
    $("ui-draggable-handle").draggable()
    $(".ui-draggable").draggable()

refreshOffers 确实会登录到控制台，所以我知道我正在使用此功能。但是这些单独或一起似乎都没有使按钮可拖动。

这是 HTML（实际上它是我试图使其可拖动的第一个按钮，尽管它们都应该是可拖动的）：

<div class="question-types clearfix">
                        <div class="left">
                            <button id="drag-me" type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="single_select" ng-click="questionClicked"><span></span>Single Selection</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="single_select_matrix"><span></span>Single Select Grid</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="rating"><span></span>Rating</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="short_text_input"><span></span>Short Text</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="dropdown"><span></span>Drop Down</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="rank_order"><span></span>Ranking</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="numeric_input"><span></span>Numeric</button>
                        </div>
                        <div class="right">
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="multiple_select"><span></span>Multiple Selection</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="multiple_select_matrix"><span></span>Multiple Select Grid</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="descriptive"><span></span>Message</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="long_text_input"><span></span>Long Text</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="slider"><span></span>Slider</button>
                            <button type="button" class="btn btn-default btn-block question-type ui-draggable ui-draggable-handle" data-type="sum_select"><span></span>Sum</button>
                        </div>
                    </div>

知道我错过了什么吗？

Answer 1

似乎答案是按钮需要cancel: false set：

$(".ui-draggable").draggable({
    cancel: false
})