Question

如何使Bootstrap 2.x.x模式对话框可拖动？

我尝试过各种各样的例子，运气不好。我认为它们不适用于Bootstrap，但这可能是一个不好的假设。

我过度复杂吗？

使用jQuery，我想我会这样做：

$("#idForModal").draggable();

但是，它什么也没做，WebKit中没有控制台错误。

编辑：以下添加。

也许是因为模态是iFrame，而且无法拖动？不 - 那不是它，因为这有效。 http://jsfiddle.net/nj6ST/show/

Answer 1

此代码确实有效：

$("#idForModal").draggable();

我的代码还有其他问题阻止它工作。

Answer 2

不要使用“模态”，“模态”会在内容后面创建“div”并阻止用户使用其他屏幕控制如果你想测试：jsfiddle

var oldX = 0;
var oldY = 0;
var mouseDown = false;
$('.modal_').mousedown(function(e){
   log('mousedown');
   oldX = e.clientX;
   oldY = e.clientY;
    console.log(oldX);
    mouseDown = true;
}).mouseup(function(e){
   log('mosueup');
    mouseDown = false;
}).mousemove(function(e){    
    if(mouseDown ){
        self = $(this);      
      var top = parseInt(self.css('top').replace('px', ''));
       var left = parseInt(self.css('left').replace('px', ''));

        log(left + (oldX - e.clientX)  + ' , ' + top);
        self.css('left', (left + e.clientX-oldX) + 'px');
        self.css('top', (top + e.clientY-oldY) + 'px');

        oldX = e.clientX;
        oldY = e.clientY;
    }
});
$('.modal_').on('dragstart', function(event) { event.preventDefault(); });

如何使Bootstrap 2.x.x模式对话框可拖动？

2 个答案: