jqueryUI影像可調整大小但不可拖動？-有解無憂

我有以下腳本允許我調整影像大小，但是，我無法拖動影像并更改其位置

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="home.css" >
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/>

</head>

<body>
<div class="row">
   <div class="div1">
   <h1> About Us </h1>

   <p class="card-text">
    general description 
   </p>

   
   <div id="draggableHelper"  style="display:inline-block">
    <img id="image"  src = "images/jimslogo2.png"/>
    </div>
   </div>


   <div class="div2">
    <span class="dot">


    <div>
    <div id="rotator"></div>
    </div>

     <p class="textScale">
       <b>Featured Products </b>
     </p>
    </span>
   </div>
</div>


<script type="text/javascript">

  $(document).ready(function(){
  $('#draggableHelper').draggable();
  $('#image').resizable();
  
  });
  </script>


</body>
</html>

我試圖拖動的影像包含在“行”類 div 中它自己的 div 標記中。我不確定這行不通

uj5u.com熱心網友回復：

您在可拖動中的目的是什么，您需要為它定義選項

jquery UI 影像可調整大小但不可拖動？

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="home.css" >
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
<div class="row">
   <div class="div1">
   <h1> About Us </h1>

   <p class="card-text">
    general description 
   </p>

   
   <div id="draggableHelper">
    <img id="image"  src = "images/jimslogo2.png"/>
    </div>
   </div>


   <div class="div2">
    <span class="dot">


    <div>
    <div id="rotator"></div>
    </div>

     <p class="textScale">
       <b>Featured Products </b>
     </p>
    </span>
   </div>
</div>


<script type="text/javascript">

  $(document).ready(function(){
  $('#draggableHelper').draggable();
  $('#image').resizable();
  
  });
  </script>


</body>
</html>

uj5u.com熱心網友回復：

請改用這兩個鏈接。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>

你可以在這里試試我的答案https://jsfiddle.net/a68mdzes/

希望它有效:)

uj5u.com熱心網友回復：

您的腳本中似乎有兩個版本的 jQuery（3.5.1 和 1.9.1）。您還使用的是舊版本的 jQuery UI (1.9.2)。最好確保您使用的是最新版本。

$(document).ready(function() {
  $('#draggableHelper').draggable();
  $('#image').resizable();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="row">
  <div class="div1">
    <h1> About Us </h1>
    <p class="card-text">general description</p>
    <div id="draggableHelper" style="display:inline-block">
      <img id="image" src="https://dummyimage.com/100x100/000/fff.png&text=IMAGE" />
    </div>
  </div>
  <div class="div2">
    <span class="dot">
    <div>
    <div id="rotator"></div>
    </div>
     <p class="textScale">
       <b>Featured Products </b>
     </p>
    </span>
  </div>
</div>

上述測驗允許兩者按預期作業。你會注意到我只使用了一個版本的 jQuery 和 jQuery UI。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/430912.html

標籤：javascript html jQuery jQuery-ui

上一篇：我想在ASP.NETCore5.0MVC中通過jQuery在foreach回圈中獲取第一次迭代的值

下一篇：如何按給定開始日期和結束日期的月份匯總？