jquery UI image is resizable but not draggable?-CodePudding

I have the following script that allows me to resize the image, however, I am not able to drag the image around and change its position

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

The image I'm trying to drag is contained in its own div tag within the "row" class div. I'm not sure this isn't working

CodePudding user response：

What is your purpose in the draggable, you need to define the options for it

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

CodePudding user response：

Use these two links instead.

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

You can try my answer here https://jsfiddle.net/a68mdzes/

Hope it works :)

CodePudding user response：

You appear to have two versions of jQuery (3.5.1 & 1.9.1) in your script. You are also using an older version of jQuery UI (1.9.2). It would be best to ensure you are using the latest versions.

$(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>

The above test allows for both to work as expected. You will notice I am using only one version of jQuery and jQuery UI.