2

I want to active the draggable and resizable function in jquery when (and only) the ctrl+alt button is pressed and disable when it's released and I wrote this code

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #para {
      width: 150px;
      height: 150px;
      padding: 0.5em;
    }
    
    .ui-resizable-helper {
      border: 2px dotted #00F;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function(e) {
      if (e.ctrlKey || e.altKey) {
        $("#para").draggable();
        $("#para").resizable({
          helper: "ui-resizable-helper"
        });
      }
    });
  </script>
</head>

<body>

  <div id="para" class="ui-widget-content">
    <h1 contenteditable>Header</h1>
    <hr />
    <p contenteditable>paragraph</p>
  </div>


</body>

</html>

After I finished this code I tried to press ctrl+alt in the browser but it doesn't work, I've removed the if (e.ctrlKey || e.altKey) logic part and it works successfully but as I replace the logic statement back there it doesn't work

How do I solve this?

1 Answer 1

1

You'll need an event handler to catch the keypresses.

You can initialize the plugin as disabled and then enable it when the keys are pressed, and disable it again when the keys are released

 $(function() {
    $("#para").draggable({
        disabled : true
    });

    $("#para").resizable({
        helper   : "ui-resizable-helper",
        disabled : true
    });

    $(document).on({
        keydown : function(e) {
            if (e.ctrlKey && e.altKey) {
                $("#para").draggable( "enable" );
                $("#para").resizable( "enable" );
            }
        }, 
        keyup : function() {
            $("#para").draggable( "disable" );
            $("#para").resizable( "disable" );
        }
    });
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #para {
      width: 150px;
      height: 150px;
      padding: 0.5em;
    }
    
    .ui-resizable-helper {
      border: 2px dotted #00F;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <div id="para" class="ui-widget-content">
    <h1 contenteditable>Header</h1>
    <hr />
    <p contenteditable>paragraph</p>
  </div>


</body>

</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.