Question

我正在尝试在网络应用中拖动一个对话框而不能正常工作？

我的代码是这样的...... draggable设置为true但仍然没有拖动...而且对于你的信息，背景中也有可移动的对象。拖动符号显示，但对话框没有移动为什么？你能解释一下如何使对话框可拖动吗？

 $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() {
        });

Answer 1

<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中拖动对话框？

1 个答案: