【发布时间】：2017-12-24 22:30:44
【问题描述】：
我正在尝试开发一些东西：
- 在没有 jquery-ui 的情况下在窗口上制作可拖动/可移动的引导模式
我使用backbone.js，但我认为这不是那么重要。在一段代码中，我定义了我的引导模式：
<div id="detailsContainer">
<div class="modal fade" id="someId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span> Some Title</h4>
</div>
<div class="modal-body" id="content">
<form class="form-horizontal" role="form" id="modalFormBody">
... some content
</form>
</div>
<div class="modal-footer">
<div class="pull-right" id="modalButtonBar">
<button type="button" class="btn btn-default control-button" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary control-button" id="addButton">Add</button>
</div>
</div>
</div>
</div>
现在，当我尝试使用以下代码设置模式可拖动时：
var $container = $("#detailsContainer");
$container.on('mousedown', 'div', function() {
$(this).addClass('draggable').parents().on('mousemove', function(e) {
$('.draggable').offset({
top: e.pageY - $('.draggable').outerHeight() / 2,
left: e.pageX - $('.draggable').outerWidth() / 2
}).on('mouseup', function() {
$(this).removeClass('draggable');
});
});
e.preventDefault();
}).on('mouseup', function() {
$('.draggable').removeClass('draggable');
});
行为很奇怪：
- 当我拿起模态框时，模态框会跳出窗口。我试图修复将一些值更改为顶部和左侧，但没有什么是好的。
- 当我选择模态体的一些下元素（例如输入文本）时，我可以在模态中移动输入文本。但我不要这个！我只希望整个模态可以拖动/移动。
上面的例子是我在stackoverflow上找到的（抱歉我没找到上面的链接）。我还找到了一些 jquery-ui 的例子。但我不想使用它。只有jQuery。
我也尝试过：Dialog draggable 和 JQuery Draggable Demo。但没有成功。 第一个不让我的模态可拖动，第二个我不明白如何将它与 $container
一起使用有人可以帮我吗？
更新
$('body').on('mousedown', '.modal-dialog', function() {
$(this).addClass('draggable').parents().on('mousemove', function(e) {
$('.draggable').offset({
top: e.pageY - $('.draggable').outerHeight() / 2,
left: e.pageX - $('.draggable').outerWidth() / 2
}).on('mouseup', function() {
$(this).removeClass('draggable');
});
});
e.preventDefault();
}).on('mouseup', function() {
$('.draggable').removeClass('draggable');
});
但是当我想拖动时……它会改变我在模态框上拾取它的位置。它在拐角处。不是我捡到的吗？我该如何纠正？将“.modal-dialog”放在mousedown功能上是错误的吗？如果这是错误的，我必须把它放在那里？
还有一点：我在模态体中的元素（示例下拉）不能拖动。如何排除它们？
【问题讨论】：
-
在没有 jquery ui jsfiddle.net/tovic/mkUJf987654323@ 的情况下检查这个小提琴
-
这个解决方案更符合我的预期。现在它们只是我在更新中添加的两件事。
-
我对此不太满意。当您按下模态框时，它会在窗口上消失……我该如何纠正？以及如何排除输入文本（输入和文本区域）的行为？
-
现在检查我的更新答案它已经解决了只需更改此顶部：e.pageY - $('.draggable').outerHeight() /8，左：e.pageX - $('.draggable' ).outerWidth() /8 和更新的小提琴jsfiddle.net/mkUJf/1452
-
好吧，这不是最好的 UI 感觉......但目前它是我拥有的最好的解决方案。非常喜欢你:)
标签： javascript jquery html css twitter-bootstrap-3