jquery UI的可拖动性和可伸缩性不起作用

当我在jsfiddle上使用外部资源时，这个可拖动性代码正在工作。

但是，通过脚本和样式标记包含jquery和jquery ui文件并不能使我的div具有可拖动性和/或可调整大小。

这太烦人了。我已经试了这么久了。

这是我的代码

HTML:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" type="text/javascript"></script>
  <div id="outer" style="background-color: #3C3C3C; width: 300px; height: 300px;">
           <div id="object1" class="draggable resizable">
           </div>
  </div>

CSS:

  .draggable.resizable
  {
      position: relative; 
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: top;
      zoom: 1;
      *display: inline;   
      cursor: hand; 
      cursor: pointer;
      border: 1px solid #E0E0E0;
      z-index: 1;
  }

  .ui-resizable-handle  {
      background: #E0E0E0;
      width: 9px;
      height: 9px;
      z-index: 0;
  }

  .ui-resizable-se
  {
      right: -5px;
      bottom: -5px;
  }
  .ui-resizable-ne
  {
      right: -5px;
      bottom: -5px;
  }

  #object1 {
    background-color: yellow;
    position: absolute;
    left: 10px;
    top: 20px;
    width:30px;
    height: 50px;
  }

JS:

  $('.draggable').draggable({
    containment: '#outer'
  });
  $('.resizable').resizable({
      //aspectRatio: true,
        containment:'#outer'
      , handles: 'ne, se, sw, nw'
  });