Obtenez de l'attribut de JQuery ui.déplaçable

Je suis en utilisant JqueryUI pour faire glisser et déposer sur une de mes pages et pour une raison que je n'arrive pas à obtenir un attribut de l'interface utilisateur.déplaçable objet d'être passé dans mon drop, drop event.

de l'interface utilisateur.déplaçable.attr("src") et $(interface utilisateur.déplaçable).attr("src") à la fois de retour indéfini, mais si je tape ui.draggable.html() je vais avoir le html. Des idées?

Êtes-vous le nom de votre deuxième argument de drop() 'ui"? Donc: drop:function(event,ui){...
Yep, drop: function(event, ui) { console.log(ui.déplaçable.attr("src")); }

OriginalL'auteur Jon | 2010-04-13

  1. 10

    J'ai tout compris. La solution est d'appeler l'interface utilisateur.déplaçable.find("img").attr("src"), j'ai simplement supposé que l'interface utilisateur.déplaçable objet était une image.

    OriginalL'auteur Jon

  2. 2

    @Jon réponse est bonne. La solution est tout simplement d'essayer attr méthode, sans essayer de les inspecter l'élément déplaçable à l'avance ( sinon vous allez être surpris).

    donné un élément html déclaré que jQuery UI "déplaçable":

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

    et compte tenu de cette 'div' comme droppable:

    <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 j'ai eu :

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

    OriginalL'auteur Siwei Shen 申思维

  3. 1

    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>

    OriginalL'auteur tokei

  4. 0

    Cette réponse est à gauche pour les futurs utilisateurs. juste du journal de la console l'un par l'interface utilisateur.déplaçable et de l'étendre, puis de l'interface utilisateur.déplaçable.contexte ...... ainsi de suite. Vous comprendrez quila nom de la source est. 

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

    OriginalL'auteur Muhammad Ashikuzzaman