Geek asks and answers

The jQuery UI dialog is not draggable and does not change

I'm having trouble dragging and dropping a dialog box and resizing. All the documentation and questions about this sound straightforward, but I can't get it to work. Any idea what I can do wrong?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <SCRIPT TYPE="text/javascript" SRC="js/jquery-ui-1.8.10.custom.min.js"></SCRIPT>
    <SCRIPT TYPE="text/javascript">
$(document).ready(function(){
 $('#dialog-form').dialog({
//  autoOpen: false,
  height: 400,
  width: 350,
  modal: true,
  draggable: true,
  resizable: true,
  buttons: {
   Cancel: function() {
    $( this ).dialog( "close" );
   }
  },
  close: function() {
   alert('here');
  }
 });
});
    </SCRIPT>
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
        <style>
#dialog-form label {float:left; width:100px;}
</style>
</head>
<body>

<div id="dialog-form" title="Create new product">
    <form>
    <fieldset>
        <label for="pt">Product Type</label>
        <input type="text" name="pt" id="pt" class="text ui-widget-content ui-corner-all" />
  <br>
        <label for="prod">Producer</label>
        <input type="text" name="prod" id="prod" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>
</div>

</body>
</html>
+3
source share
3 answers

This is because the draggable script is not self-contained. You also need to enable the mouse event library.

<script src="...../ui/jquery.ui.mouse.js"></script>

in addition to

<script src="...../ui/jquery.ui.draggable.js"></script>

Efficiency Note: The drop and drag function adds approximately 45 KB (uncompressed) of additional javascript. This is almost as much code as it takes to get the basic user interface functions from jquery-ui.

+5

- , ... ?

JsBin > http://jsbin.com/uqahu3/edit

.

+1

I assume you are using IE 6 and have a problem. If you are using IE 6, try turning on bgiframe.js http://docs.jquery.com/Plugins/bgiframe

0
source

More articles:


All Articles