Question

求助：https://jsfiddle.net/shovas/jzs1uz0d/19/我认为我选择了错误的元素来制作可拖动的。

如何使 Bootstrap Tour对话框可拖动？

我想将 jQuery UI Draggable 与 Bootstrap Tour对话一起使用，但是当我致电$('#dialog').draggable()时似乎没有任何改变。

Answer 1

我一定是在错误的元素上使用draggable，因为我首先让它在jsfiddle中工作并将其移植到我的真实代码中并且它有效：

https://jsfiddle.net/shovas/jzs1uz0d/19/

var tour = new Tour({
        element: '#step1',
        name: 'tour',
template: function ( stepIndex, step ) {
        return "" +
        "<div class='popover tour'>" +
        "       <div class='arrow'></div>" +
    " <div class='popover-header'>" +
        "   <h3 class='popover-title'></h3>" +
    " </div>" +
        " <div class='popover-content'></div>" +
        "       <div class='popover-navigation'>" +
    "         <button class='btn btn-default' data-role='prev'>« Prev</button>" +
    "         <span data-role='separator'>|</span>" +
    "         <button class='btn btn-default' data-role='next'>Next »</button>" +
    " </div>" +
        " <button class='btn btn-default' data-role='end'>End tour</button>" +
                "</div>";
},
onShown: function ( tour ) {
        console.log('onShown()')
    var curStepIndex = tour.getCurrentStep();
    var curStep = tour.getStep(curStepIndex);
    var targetElementSelector = tour._options.steps[curStepIndex].element;
    var targetElement = $(targetElementSelector).get(0);
    //$(targetElement).draggable();
    $('.popover.tour').draggable({
        handle: '.popover-header'
    });
},
steps: [
        {
                        element: '#step1',
                        title: 'Step #1',
    content: 'Lorem ipsum dolar sit amet Lorem ipsum dolar sit amet Lorem ipsum dolar sit amet Lorem ipsum dolar sit amet Lorem ipsum dolar sit amet Lorem ipsum dolar sit amet Lorem ipsum dolar sit amet.'
    }
]
});
tour.init();
tour.start();

...snip...

使Bootstrap Tour对话框可拖动

1 个答案: