Foros del Web » Programando para Internet » Javascript » Frameworks JS »

[SOLUCIONADO] Jquery arrastrar y soltar

Estas en el tema de Jquery arrastrar y soltar en el foro de Frameworks JS en Foros del Web. Tengo un div con mucho texto y en él varias fotos colocadas al comienzo del texto. Mi intención es arrastrar cada foto al comienzo o ...
  #1 (permalink)  
Antiguo 15/12/2013, 04:06
 
Fecha de Ingreso: diciembre-2008
Mensajes: 16
Antigüedad: 16 años
Puntos: 0
Jquery arrastrar y soltar

Tengo un div con mucho texto y en él varias fotos colocadas al comienzo del texto.
Mi intención es arrastrar cada foto al comienzo o al final de los párrafos que componen el texto.

Hasta ahora lo único que he conseguido es arrastrar las fotos, pero se quedan encima del texto y no entre él.

He probado poniendo al div droppable, he puesto el texto en un span también con droppable y lógicamente a las fotos draggable.

Necesito ayuda. Gracias.
  #2 (permalink)  
Antiguo 15/12/2013, 08:41
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 3 meses
Puntos: 578
Respuesta: Jquery arrastrar y soltar

Sigue este ejemplo. Es necesario el preventDefault() y un par de cosas más.
  #3 (permalink)  
Antiguo 15/12/2013, 09:23
 
Fecha de Ingreso: diciembre-2008
Mensajes: 16
Antigüedad: 16 años
Puntos: 0
Respuesta: Jquery arrastrar y soltar

Gracias PHPeros.
Funciona, pero en el IExplorer 7 y 8 no. Parece que es HTML5 y yo lo necesito en Jquery.
  #4 (permalink)  
Antiguo 15/12/2013, 09:37
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 11 meses
Puntos: 206
Respuesta: Jquery arrastrar y soltar

Pon en http://jsfiddle.net lo que lleves hecho. Y asegúrate que funciona "bien", elimina todo lo innecesario y pon exclusívamente todo lo relacionado con lo que tienes dudas. No pegues un chorizo que no haya dios que lo entienda.
  #5 (permalink)  
Antiguo 15/12/2013, 11:06
 
Fecha de Ingreso: diciembre-2008
Mensajes: 16
Antigüedad: 16 años
Puntos: 0
Respuesta: Jquery arrastrar y soltar

Gracias marlanga:

He probado lo que dices y tampoco funciona.

Este es mi código:

Esto en el head junto con las librerías jquery y jquery-ui:
Código:
	$(document).ready(function(){
		$('#foto').draggable({
           
        });
		$('#comentarios').droppable({
            accept: "#foto"});
	    });
Y esto en el body:
Código:
<div id="comentarios">
    <img id="foto" src="http://media.jukebox.es/a1846/i1846.jpg" border="0" align="left" style="margin-right:10px" />
   <span id="textocomentario">BONNIE TYLER<br /><br />
Gaynor Hopkins (nacida el 8 de junio de 1951 en Sweken, Neath, Gales), mejor conocida por su seudónimo artístico Bonnie Tyler. Es una cantante galesa, compositora, empresaria y filántropa activa. Dueña de una voz muy característica, como ronca o cascada.
<br /><br />
Comenzando como un cantante local en Swansea, Tyler saltó a la fama con el lanzamiento de su álbum de 1977 The World Starts Tonight y sus sencillos " Lost in France" y " More Than a Lover". Su cancion "It's a Heartache" fue un éxito a ambos lados del Atlántico, alcanzando el número uno en varios países europeos y rompiendo las listas de éxitos estadounidenses. Después de ganar el 10 º Festival Mundial de la Canción Popular con 1.979 single "Sitting on the Edge of the Ocean". Su carrera alcanzó su punto máximo en la década de 1980 con su colaboración Jim Steinman, lanzando éxitos internacionales "Total Eclipse of the Heart", "Holding Out ​​for a Hero", "If You Were a Woman and I Was a Man", "Here She Comes" y "Loving You's a Dirty Job but Somebody's Gotta Do It".
<br /><br />
En la década de 1990 tuvo un mayor éxito en Europa continental con sencillos como "Bitterblue" y "Fools Lullaby". Con el productor alemán Dieter Bohlen, Tyler había continuado éxito con tres álbumes antes de lanzar en el Reino Unido y Estados Unidos de nuevo, y su sencillo "Making Love Out of Nothing at All".
<br /><br />
Haciendo una reaparición a finales de 2003 en Francia, Tyler lanzó "Si demain ..." con Kareen Antonn, que fue número uno en Francia durante diez semanas, vendiendo más de 700.000 copias. En los últimos años ha aparecido en varios programas de televisión del Reino Unido, hizo un cameo en la telenovela británica Hollyoaks. Mas tarde estuvo de gira con el fallecido cantante Robin Gibb en 2010 y con Status Quo en 2012. Su ultimo álbum "Rocks And Honey" tuvo un éxito moderado en Europa, con su sencillo "Believe In Me" con el cual represento al Reino Unido en el Festival de la Canción de Eurovisión, quedando en el puesto 19 con 23 puntos. Posteriormente Tyler gano el premio ESC Radio como la mejor canción y la mejor artista femenina, marcándola como el primer representante del Reino Unido en recibir dos premios. sus últimos sencillos, "This Is Gonna Hurt" y "Love Is the Knife" acaban de ser lanzado en agosto y septiembre de 2013, respectivamente, y ella acaba de terminar su tour Sudáfrica 2013.
<br /><br />
Tyler ha colaborado con varios cantantes incluyendo Cher, Meat Loaf, Mike Oldfield, Frankie Miller, Vince Gill y Andrea Bocelli y lanzado más de 30 sencillos a dúo desde 1983.
<br /><br />
Con una carrera que abarca casi cuatro décadas, ha ganado tres premios Goldene Europa, un Premio Echo, y ha sido nominado a tres premios Brit y tres Premios Grammy. Su distintiva voz ronca, como resultado de una operación para extirpar los nódulos vocales, ha tenido ella la comparación con artistas como Rod Stewart y Kim Carnes, y en combinación con su éxito profesional, se ha dado a conocer como la "La Primera Dama del Rock internacional".
frentamiento.</span>
</div>
  #6 (permalink)  
Antiguo 15/12/2013, 12:47
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 11 años, 3 meses
Puntos: 578
Respuesta: Jquery arrastrar y soltar

Te falta al droppable añadir lo que pasa cuando sueltas el elemento (clonarlo y situarlo):

Código Javascript:
Ver original
  1. $("#foto").draggable({
  2. helper: "clone",
  3. start: function(e, ui){
  4. $(ui.helper).addClass("ui-clase");
  5. }
  6. });

Código CSS:
Ver original
  1. .ui-clase{
  2. background-image: URL IMAGEN;
  3. }
  #7 (permalink)  
Antiguo 15/12/2013, 13:19
 
Fecha de Ingreso: diciembre-2008
Mensajes: 16
Antigüedad: 16 años
Puntos: 0
Respuesta: Jquery arrastrar y soltar

Pero cómo la sitúo, por ejemplo, al principio de otro párrafo.
Ahora mismo al soltar la imagen desaparece y sigue estando el original en su sitio.

He corregido el draggable y el css tal como me indicas, pero y el droppable ¿hay que añadirle algo?

Llevo no sé cuántos días y cuántas páginas leídas y no soy capaz.
Muchas gracias.
  #8 (permalink)  
Antiguo 15/12/2013, 14:57
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 11 meses
Puntos: 206
Respuesta: Jquery arrastrar y soltar

http://jsfiddle.net/marlanga/2y5Nn/3/
Mira bien los cambios que he hecho en el html.
  #9 (permalink)  
Antiguo 16/12/2013, 08:41
 
Fecha de Ingreso: diciembre-2008
Mensajes: 16
Antigüedad: 16 años
Puntos: 0
Respuesta: Jquery arrastrar y soltar

Muchas gracias a PHPeros y a Marlanga.

Funcionan los cambios de Marlanga.

Intentaré con los cambios oportunos la alineación a izquierda o derecha de la foto.

Otra cosa que debo salvar es que el texto es introducido por los usuarios en un textarea y los saltos de línea no me llegarán con la etiqueta <p> sino con <br>. Lo ideal es que fuera con <p> de párrafo. Lo intentaré y si no lo consigo ya lo expondré para que me ayudéis.

Un abrazo a todos.

Última edición por trompi14; 16/12/2013 a las 08:55

Etiquetas: arrastrar, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:48.