$ dialog draggable不起作用?如何在jQuery或JS中拖动对话框? [英] $dialog draggable is not working? how to drag a dialog in jQuery or JS?
本文介绍了$ dialog draggable不起作用?如何在jQuery或JS中拖动对话框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试在Web应用程序中拖动对话框，但为什么不起作用?
I'm trying to drag a dialog in a web app and its not working why?
我的代码是这样的... draggable设置为true，但仍未拖动...对于您的信息，背景中也有可移动对象.显示了拖动符号，但对话框不移动为什么?您能解释一下如何使对话框可拖动吗?
My code is something like this... draggable is set to true but still its not dragging... and for your info there is movable objects in the background also. dragging symbol is shown but the dialog is not moving why? Can you explain how to make a dialog draggable?
$dlgLibrary = $('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>')
.dialog({
autoOpen: false,
title: 'Browse & Select',
maxWidth:1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
closeOnEscape: true,
canMaximize:true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function(event, ui) {
if (resizeHt== 0 && resizeWd== 0) {
resizeHt = $dlgLibrary.dialog( "option", "height" );
resizeWd = $dlgLibrary.dialog( "option", "width" );
};
$('#eBLibrary-Show').width(Number(resizeWd-(resizeWd*16/100)));$('#eBLibrary-Show').height(Number(resizeHt-(resizeHt*35/100)));
resizeHt= 0;
resizeWd= 0;
},
open: function(event, ui) {
}
$.ajax({ url: './Library.html',
success : function(data) {
},
buttons: libButtons,
close: function() {
});
推荐答案
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index3</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$dlgLibrary =
$(function () {
$('<div style="overflow-y:hidden;color:#FBFBEF"" id="eBLibrary"></div>').dialog(
{
autoOpen: true,
title: 'Browse & Select',
maxWidth: 1000,
maxHeight: 600,
width: 800,
height: 600,
dialogClass: "alertDialog",
modal: true,
buttons: {
"Create an account": libButtons,
Cancel: function () {
dialog.dialog("close");
}
},
closeOnEscape: true,
canMaximize: true,
draggable: true,
resizeHt: 0,
resizeWd: 0,
resizeStop: function (event, ui) {
if (resizeHt == 0 && resizeWd == 0) {
resizeHt = $dlgLibrary.dialog("option", "height");
resizeWd = $dlgLibrary.dialog("option", "width");
};
$('#eBLibrary-Show').width(Number(resizeWd - (resizeWd * 16 / 100))); $('#eBLibrary-Show').height(Number(resizeHt - (resizeHt * 35 / 100)));
resizeHt = 0;
resizeWd = 0;
},
open: function (event, ui) {
var person = {};
person.Name = "Amir";
var pdata = { "p": person };
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "../../SimpleService.asmx/GetData",
data: JSON.stringify(pdata),
dataType: "json",
async: true,
success: function (data, textStatus) {
if (textStatus == "success") {
if (data.hasOwnProperty('d')) {
msg = data.d;
} else {
msg = data;
}
$('#divMore').append(msg);
}
},
error: function (data, status, error) {
alert("error");
}
});
},
close: function (event, ui) {
}
}
);
});
function libButtons() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui@jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
</script>
</head>
<body>
</body>
</html>
这篇关于$ dialog draggable不起作用?如何在jQuery或JS中拖动对话框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
