Draggable html image with Javascript

Asked

Viewed 34 times

1

I’m having trouble in the following section of the code

<!DOCTYPE html>
<html lang="pt-br">

<link rel="stylesheet" type="text/css" href="style.css">

<body>
<div id="lista" class="draggable">
 <p>Isto é uma</p>
 <p>Figurinha</p>
</div>

<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Figurinha</h3>
</div>

<img id="fla" src="./img/crf.png" class="draggable" />
<img id="liberta" width="250px" height="600px" src="./img/liberta.png" class="draggable" />

<script type="text/javascript" src="./animation.js"></script>
</body>
</html>

and the JS: 

$( function() {
    $( ".draggable" ).draggable();
    $( ".draggable" ).resizable();
} );

$( function() {
    $( ".ui-widget-content" ).resizable();
    $( ".ui-widget-content" ).draggable();
} );

Only div`s are running draggable and resizable (In images only resizable works). I’m still beginner in JS, if anyone can help me in the solution, from now, I thank.

javascript html css

1 answer

1


The plugin automatically wraps the images in a div. Apply the .draggable() Separate image div from other Ivs:

$( function() {
    // o que tiver a classe menos imagens
    $( ".draggable:not(img)" ).draggable().resizable();
    // apenas imagens com a classe
    $("img.draggable" ).resizable().parent().draggable();
} );

Testing:

$( function() {
    $( ".draggable:not(img)" ).draggable().resizable();
    $("img.draggable" ).resizable().parent().draggable();
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="lista" class="draggable">
 <p>Isto é uma</p>
 <p>Figurinha</p>
</div>

<img id="fla" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="draggable" />
<img id="liberta" width="250px" height="600px" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" class="draggable" />

There is a bug ticket opened a few years ago about that.

  • Solved! Thank you very much!

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.