1

Estou tendo problemas na seguinte parte do cógido

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

e o JS:

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

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

Apenas as div`s estão funcionando o draggable e o resizable (Nas imagens só funciona o resizable). Sou iniciante ainda em JS, se alguem puder me ajudar na solução, desde já, agradeço.

1 Resposta 1

1

O plugin embrulha automaticamente as imagens numa div. Aplique o .draggable() à div da imagem de forma separada das outras divs:

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

Teste:

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

Existe um ticket de bug aberto há uns anos trás a respeito disso.

1
  • Resolvido! muito obrigado!
    – BR3N0
    Commented 19/03/2020 às 17:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .