获取 JQuery ui.draggable 的属性
Posted
技术标签:
【中文标题】获取 JQuery ui.draggable 的属性【英文标题】：Get attribute of JQuery ui.draggable 【发布时间】：2011-02-07 15:33:35 【问题描述】：我在我的一个页面上使用 JqueryUI 进行拖放，但由于某种原因，我似乎无法将 ui.draggable 对象的属性传递到我的可放置拖放事件中。
ui.draggable.attr("src") 和 $(ui.draggable).attr("src") 都返回 undefined，但是如果我输入 ui.draggable.html() 我将返回 html。有什么想法吗？
【问题讨论】：
您是否将第二个参数命名为 drop() 'ui'？所以：drop:function(event,ui)...
是的，drop: function(event, ui) console.log(ui.draggable.attr("src"));
【参考方案1】：
我想通了。解决方法是调用ui.draggable.find("img").attr("src")，我只是假设ui.draggable对象是一张图片。
【讨论】：
【参考方案2】：@Jon 的回答是正确的。解决方法是简单地尝试attr 方法，而不是尝试事先检查可拖动元素（否则你会感到困惑）。
给定一个声明为 jQuery UI 的“可拖动”的 html 元素：
<img src='some/path/for/this/image' class='draggable_img' title='I am an image!' />
并将这个“div”作为可放置的：
<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>
我得到了：
ui.draggable.title: undefined
ui.draggable.attr("title"): I am an image!
ui.draggable: [object Object]
-> No Properties
【讨论】：
【参考方案3】：你可以这样做，例如
<!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>
【讨论】：
【参考方案4】：这个答案留给未来的用户。只需通过 ui.draggable 控制台记录一个并展开它，然后 ui.draggable.context ......等等。您将了解源名称是什么。
console.log(ui.draggable.context.attributes.src.textContent)
【讨论】：
以上是关于获取 JQuery ui.draggable 的属性的主要内容，如果未能解决你的问题，请参考以下文章
javascript jQuery UI Draggable转换比例修复