Question

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

Answer 1

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

混合内容：＆＃39; https://fiddle.jshell.net/akashdmukherjee/wj41wLcx/1/show/＆＃39;是通过HTTPS加载的，但请求了一个不安全的脚本＆＃39; http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。（索引）：117混合内容：＆＃39; https://fiddle.jshell.net/akashdmukherjee/wj41wLcx/1/show/＆＃39;是通过HTTPS加载的，但是请求了一个不安全的样式表＆＃39; http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。（索引）：1混合内容：＆＃39; https://fiddle.jshell.net/akashdmukherjee/wj41wLcx/1/show/＆＃39;是通过HTTPS加载的，但请求了一个不安全的脚本＆＃39; http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js＆＃39;。此请求已被阻止;内容必须通过HTTPS提供。（index）：97未捕获的ReferenceError：$未定义

可以通过将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

jquery UI可拖动性和可调整性无法正常工作

1 个答案: