使Bootstrap Tour對話框可拖動

Question

求助：https://jsfiddle.net/shovas/jzs1uz0d/19/我認爲我選錯了要拖動的元素。

我該如何製作Bootstrap Tour對話框是否可拖動？

我想用jQuery UI的可拖動與引導旅遊對話框但是當我打電話$('#dialog').draggable()似乎沒有任何改變。

Answer 1

我必須已經使用拖動錯誤的元素，因爲我得到了它在的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...