$dialog draggable is not working? how to drag a di

2019-09-12 07:02发布

站内问答 / JavaScript
1868 1 5

I'm trying to drag a dialog in a web app and its not working why?

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

1条回答
男人必须洒脱
2楼-- · 2019-09-12 07:37 

<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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)