$dialog draggable is not working? how to drag a dialog in jQuery or JS?

半腔热情 提交于 2019-12-25 05:19:10

问题


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:


<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>


来源:https://stackoverflow.com/questions/36604090/dialog-draggable-is-not-working-how-to-drag-a-dialog-in-jquery-or-js

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!