Get Attribut von JQuery ui.draggable

Ich benutze JqueryUI zum Ziehen und Ablegen auf einer meiner Seiten und aus irgendeinem Grund kann ich nicht scheinen, ein Attribut des ui.draggable Objekts in meine Droppable Tropfen Ereignis übergeben werden .Get Attribut von JQuery ui.draggable

ui.draggable.attr ("src") und $ (ui.draggable) .attr ("src") kommen beide zurück undefined, aber wenn ich ui.draggable.html() eintippe, bekomme ich den html zurück. Irgendwelche Ideen?

Quelle

2010-04-13 Jon

Benennen Sie Ihr zweites Argument zu fallen() 'Ui'? Also: 'drop: Funktion (Ereignis, ui) {...' – Pickle

Ja, fallen lassen: Funktion (Ereignis, ui) { console.log (ui.draggable.attr ("src")); } – Jon

Ich habe es herausgefunden. Die Lösung ist, ui.draggable.find ("img") .attr ("src") aufzurufen, ich nahm einfach an, dass das ui.draggable-Objekt ein Bild war.

Quelle

2010-04-14 13:21:14 Jon

können Sie auf diese Weise tun, zum Beispiel

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

Quelle

2012-01-03 03:13:07 tokei

@ Jon Antwort richtig ist. Die Lösung ist einfach versuchen attr Methode, ohne zu versuchen, das ziehbare Element im Voraus zu prüfen (sonst werden Sie verwirrt sein).

gegeben ein HTML-Element als jQuery UI 'ziehbar' erklärt:

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

und dieses 'div' als abwerfbaren gegeben:

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

Und ich habe:

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

Quelle

2013-02-25 05:55:32

Diese Antwort bleibt für zukünftige Benutzer übrig. Loggen Sie einfach ein Protokoll mit ui.draggable und erweitern Sie es, dann ui.draggable.context ...... so weiter. Sie werden verstehen, was der Quellenname ist.

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

Quelle

2016-06-14 09:06:17

Get Attribut von JQuery ui.draggable

Antwort

Verwandte Themen