Tôi đang sử dụng JqueryUI để kéo và thả trên một trong các trang của mình và vì một lý do nào đó tôi dường như không thể nhận được thuộc tính của đối tượng ui.draggable được chuyển vào sự kiện thả có thể phân hủy của tôi .Lấy thuộc tính của JQuery ui.draggable
ui.draggable.attr ("src") và $ (ui.draggable) .attr ("src") đều trả về không xác định, tuy nhiên nếu tôi nhập ui.draggable.html(), tôi sẽ lấy lại html. Ý tưởng nào?
Tôi đã tìm ra. Giải pháp là gọi ui.draggable.find ("img"). Attr ("src"), tôi giả định rằng đối tượng ui.draggable là một hình ảnh.
bạn có thể làm theo cách này, ví dụ
<!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>
@ câu trả lời của Jon là đúng. Giải pháp chỉ đơn giản là thử phương thức attr, mà không cố gắng kiểm tra phần tử có thể kéo trước (nếu không bạn sẽ bị phân vân).
cho một yếu tố html khai báo là jQuery UI của 'kéo':
<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />
và đưa ra này 'div' như 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>
Và tôi nhận:
ui.draggable.title: undefined
ui.draggable.attr("title"): I am an image!
ui.draggable: [object Object]
-> No Properties
Câu trả lời này còn lại cho người dùng trong tương lai. chỉ cần đăng nhập một giao diện bằng ui.draggable và mở rộng nó, sau đó ui.draggable.context ...... vv. Bạn sẽ hiểu tên nguồn là gì.
console.log(ui.draggable.context.attributes.src.textContent)
Bạn có đặt tên đối số thứ hai của bạn để thả() 'ui' không? Vì vậy: 'thả: chức năng (sự kiện, ui) {...' – Pickle
Yep, drop: function (event, ui) { console.log (ui.draggable.attr ("src")); } – Jon