[英]Draggable is not working inside modal popup
我试图实现采用div的交换dragging
和dropping
。 没有模式弹出窗口,它运行良好。
但是,当我在模式弹出窗口中实现相同的操作时,拖放操作不起作用。
我想念什么?
的HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class='droppable'>
<div class="draggable">Draggable 1</div>
</div>
<div class='droppable'>
<div class="draggable">Draggable 2</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Java脚本
$(document).ready(function () {
window.startPos = window.endPos = {};
makeDraggable();
$('.droppable').droppable({
hoverClass: 'hoverClass',
drop: function(event, ui) {
var $from = $(ui.draggable),
$fromParent = $from.parent(),
$to = $(this).children(),
$toParent = $(this);
window.endPos = $to.offset();
swap($from, $from.offset(), window.endPos, 200);
swap($to, window.endPos, window.startPos, 1000, function() {
$toParent.html($from.css({position: 'relative', left: '', top: '', 'z-index': ''}));
$fromParent.html($to.css({position: 'relative', left: '', top: '', 'z-index': ''}));
makeDraggable();
});
}
});
function makeDraggable() {
$('.draggable').draggable({
zIndex: 99999,
revert: 'invalid',
start: function(event, ui) {
window.startPos = $(this).offset();
}
});
}
function swap($el, fromPos, toPos, duration, callback) {
$el.css('position', 'absolute')
.css(fromPos)
.animate(toPos, duration, function() {
if (callback) callback();
});
}
});
只是因为默认情况下模式是display: none;
因此javascript找不到元素来初始化拖动功能!
您需要做的是延迟拖动功能,直到元素不显示为无。
除了拖动工作正常之外,小提琴被弄乱了,因为它缺少jQuery文件,也别忘了优先级jQuery必须是第一个要加载的JS文件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.