Get attribut de JQuery ui.draggable

J'utilise JqueryUI pour glisser-déposer sur une de mes pages et pour une raison quelconque, je n'arrive pas à obtenir un attribut de l'objet ui.draggable qui est passé dans mon événement droppable drop .Get attribut de JQuery ui.draggable

ui.draggable.attr ("src") et $ (ui.draggable) .attr ("src") renvoient tous deux undefined, cependant si je tape ui.draggable.html() je récupèrerai le html. Des idées?

Source

2010-04-13 Jon

Appellez-vous votre deuxième argument à drop() 'ui'? Donc: 'drop: fonction (événement, ui) {...' – Pickle

Oui, drop: fonction (événement, ui) { console.log (ui.draggable.attr ("src")); } – Jon

Je l'ai compris. La solution est d'appeler ui.draggable.find ("img"). Attr ("src"), j'ai juste supposé que l'objet ui.draggable était une image.

Source

2010-04-14 13:21:14 Jon

vous pouvez le faire de cette façon, par exemple

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

Source

2012-01-03 03:13:07 tokei

@ réponse de Jon est correcte. La solution consiste simplement à essayer la méthode attr, sans essayer d'inspecter l'élément déplaçable au préalable (sinon vous serez intrigué).

donné un élément html déclaré comme 'draggable' de jQuery UI:

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

et compte tenu de cette 'div' comme largable:

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

Et je suis arrivé:

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

Source

2013-02-25 05:55:32

Cette réponse est laissée aux futurs utilisateurs. conservez simplement le log un par ui.draggable et développez-le, puis ui.draggable.context ...... ainsi de suite. Vous comprendrez quel est le nom de la source.

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

Source

2016-06-14 09:06:17

Get attribut de JQuery ui.draggable

Répondre

Questions connexes