javascript - jquery UI 可拖动性和可调整大小功能不起作用

Question

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

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

这太烦人了。我已经尝试这个很久了。

Here's my code

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'
  });

Answer 1

正如用户 R Lam 指出的，如果您在网络浏览器中打开控制台，您应该会看到以下错误。

Mixed Content: The page at 'https://fiddle.jshell.net/akashdmukherjee/wj41wLcx/1/show/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'. This request has been blocked; the content must be served over HTTPS. (index):117 Mixed Content: The page at 'https://fiddle.jshell.net/akashdmukherjee/wj41wLcx/1/show/' was loaded over HTTPS, but requested an insecure stylesheet 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS. (index):1 Mixed Content: The page at 'https://fiddle.jshell.net/akashdmukherjee/wj41wLcx/1/show/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js'. This request has been blocked; the content must be served over HTTPS. (index):97 Uncaught ReferenceError: $ is not defined

可以通过将 http://替换为//来修复

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" type="text/javascript"></script>

The following JS Fiddle works