Obtener el atributo de JQuery ui.draggable

Estoy usando JqueryUI para arrastrar y colocar en una de mis páginas y por alguna razón parece que no puedo obtener un atributo del objeto ui.draggable que se pasa a mi evento drop-drop drop .Obtener el atributo de JQuery ui.draggable

ui.draggable.attr ("src") y $ (ui.draggable) .attr ("src") ambos devuelven undefined; sin embargo, si escribo ui.draggable.html() recuperaré el html. ¿Algunas ideas?

Fuente

2010-04-13 Jon

¿Está nombrando su segundo argumento para drop() 'ui'? Entonces: 'drop: function (event, ui) {...' – Pickle

Sí, soltar: función (evento, ui) { console.log (ui.draggable.attr ("src")); } – Jon

Me di cuenta. La solución es llamar a ui.draggable.find ("img"). Attr ("src"), simplemente asumí que el objeto ui.draggable era una imagen.

Fuente

2010-04-14 13:21:14 Jon

puede hacerlo de esta manera, por ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>New Web Project</title> 
     <script src="jquery-1.5.min.js"></script> 
     <script src="jquery-ui-1.8.16.custom.min.js"></script>   
     <style>   
     body{ 
      margin:0; 
      padding:0; 
     } 

     .box{ 
      display:block; 
      width:100px; 
      height:50px; 
      background-color:green; 
      border:1px solid #000; 
     } 

     #drop{ 
      position:absolute; 
      top:220px; 
      left:220px; 
      width:250px; 
      height:250px; 
      border:1px solid red; 
      background:yellow; 
      z-index:1; 
     } 
     </style> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 

      $('#boxBesar p').each(function(index,element){ 
       $('#boxBesar p:eq('+index+')').css({ 
        'border':'1px solid #000', 
        'width':'100px', 
        'height':'100px', 
        'position':'absolute', 
        'left':(index*200)+10, 
        'z-index':index+2, 
        'color':'black', 
        'text-align':'center', 
        'background':'#ccc' 
       }) 
      }) 

        .draggable({ 
         revert:true 
        }) 

      $('#drop').droppable({ 
        drop:dropIt 
      }) 

      function dropIt(event,ui){ 
          //get an id 
       **var id=ui.draggable.attr('id')** 

          //test an id name 
       alert(id) 
      } 

     }) 
     </script> 
    </head> 


    <body> 
     <div id="boxBesar"> 
      <p id="b1">Box 1</p> 
      <p id="b2">Box 2</p> 
     </div> 

     <div id="parent"> 
      <div id="drop" > 

      </div> 
     </div> 
    </body> 

</html>

Fuente

2012-01-03 03:13:07 tokei

@ respuesta de Jon es correcta. La solución es simplemente probar el método attr, sin intentar inspeccionar el elemento arrastrable de antemano (de lo contrario, se quedará perplejo).

dado un elemento html declarada como de jQuery UI 'arrastrable':

<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />

y dado este 'div' como lanzables:

<div id='droppable_area'> </div> 

<script> 
$('img.candidate_thumbnail').droppable({ 
    drop: function(event, ui) { 
    console.info('ui.draggable.title:' + ui.draggable.title); 
    console.info('ui.draggable.attr("title"):' + ui.draggable.attr('title')); 
    console.dir('ui.draggable:' + ui.draggable); 
    }  
</script>

Y tengo:

ui.draggable.title: undefined 
ui.draggable.attr("title"): I am an image! 
ui.draggable: [object Object] 
    -> No Properties

Fuente

2013-02-25 05:55:32

Esta respuesta queda para futuros usuarios. simplemente con la consola logue uno por ui.draggable y ensanchelo, luego ui.draggable.context ...... etc. Comprenderá cuál es el nombre de la fuente.

console.log(ui.draggable.context.attributes.src.textContent)

Fuente

2016-06-14 09:06:17

Obtener el atributo de JQuery ui.draggable

Respuesta

Cuestiones relacionadas