jquery UI 图像可调整大小但不可拖动？答案

【问题标题】：jquery UI image is resizable but not draggable?jquery UI 图像可调整大小但不可拖动？
【发布时间】：2021-11-08 08:46:11
【问题描述】：

我有以下脚本允许我调整图像大小，但是，我无法拖动图像并更改其位置

<!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 标记中。我不确定这不起作用

【问题讨论】：

标签： javascript html jquery jquery-ui

【解决方案1】：

你在draggable中的目的是什么，你需要为它定义选项

https://jqueryui.com/draggable/

<!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>

【讨论】：

【解决方案2】：

请改用这两个链接。

<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/

希望它有效:)

【讨论】：

【解决方案3】：

您的脚本中似乎有两个版本的 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。

【讨论】：