bootstrap拖动div_BootStrap modal实现拖拽功能

bootstrap中有javascript插件modal也就是对话框，加入拖拽功能，具体内容如下

在使用modal时首选需要引用js

// 完成拖拽功能

// 完成Modal

编辑Html代码

BootStrap Modal

显示Modal

×

Modal title

One fine body…

Close

Save changes

var $button = $('.btn-default'),

$modal = $('#myModal');

$(function(){

$button.on('click',function(event) {

event.preventDefault();

/* Act on the event */

$modal.show(

'500',

function() {

var modal = $(this);

modal.find('.modal-title').text('New message to ');

$.ajax({});

});

$modal.modal('show');

});

});

要完成拖拽功能需要修改一下javascript

var $button = $('.btn-default'),

$modal = $('#myModal');

$(function(){

$button.on('click',function(event) {

event.preventDefault();

/* Act on the event */

$modal.show(

'500',

function() {

var modal = $(this);

modal.find('.modal-title').text('New message to ');

$.ajax({});

});

/* 完成拖拽 */

$modal.draggable({

cursor: "move",

handle: '.modal-header'

});

$modal.modal('show');

});

});

推荐

有关bootstrap modal插件使用详细请看：链接地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。