I'm using JqueryUI for drag and drop on one of my pages and for some reason I can't seem to get an attribute of the ui.draggable object being passed into my droppable drop event.
ui.draggable.attr("src") and $(ui.draggable).attr("src") both return undefined, however if I type ui.draggable.html() I will get the html back. Any ideas?
I figured it out. The solution is to call ui.draggable.find("img").attr("src"), I just assumed that the ui.draggable object was an image.
@Jon's answer is correct. The solution is just simply try attr method, without trying to inspect the draggable element beforehand ( otherwise you will be puzzled).
given a html element declared as jQuery UI's 'draggable':
<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />
and given this 'div' as 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>
And I got :
ui.draggable.title: undefined
ui.draggable.attr("title"): I am an image!
ui.draggable: [object Object]
-> No Properties
you can do this way, for example
<!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>
This answer is left for future users. just console log one by ui.draggable and expand it, then ui.draggable.context ...... so on. You will understand whatthe source name is.
console.log(ui.draggable.context.attributes.src.textContent)
