0
165
Vistas¿La imagen de jquery UI es redimensionable pero no se puede arrastrar?
Tengo el siguiente script que me permite cambiar el tamaño de la imagen, sin embargo, no puedo arrastrar la imagen y cambiar su posición
<!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>La imagen que estoy tratando de arrastrar está contenida en su propia etiqueta div dentro de la clase div "fila". No estoy seguro de que esto no esté funcionando.
3 Respuestas
Responde la pregunta0
Utilice estos dos enlaces en su lugar.
<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>Puedes probar mi respuesta aquí https://jsfiddle.net/a68mdzes/
Espero que funcione :)
0
¿Cuál es su propósito en el arrastrable? Debe definir las opciones para ello.
https://jqueryui.com/arrastrable/
<!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>0
Parece que tiene dos versiones de jQuery (3.5.1 y 1.9.1) en su secuencia de comandos. También está utilizando una versión anterior de jQuery UI (1.9.2). Sería mejor asegurarse de que está utilizando las últimas versiones.
$(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>La prueba anterior permite que ambos funcionen como se esperaba. Notará que estoy usando solo una versión de jQuery y jQuery UI.