jquery ui获取可放置元素的id,当放置一个项目时 [英] jquery ui get id of droppable element, when dropped an item
本文介绍了jquery ui获取可放置元素的id,当放置一个项目时的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当放置一个项目时,我们如何获取可放置元素的 id?这里我使用 jquery ui 和 asp.net mvc.
How we get the id of droppable element, when dropped an item? Here i use jquery ui and asp.net mvc.
<table id="droppable">
<tr>
<td style="width:300px;height:50px">Backlog</td>
<td style="width:300px;height:50px">Ready</td>
<td style="width:300px;height:50px">Working</td>
<td style="width:300px;height:50px">Complete</td>
<td style="width:300px;height:50px">Archive</td>
</tr>
<tr id="cart">
<td id="BackLog" class="drag" style="width:120px;height:50px;">
<img class="draggable" id="1234" src="../../Content/themes/base/images/ui-icons_222222_256x240.png" />
</td>
<td id="Ready" class="drag" style="width:140px;height:50px">
</td>
<td id="Working" class="drag" style="width:140px;height:50px">
</td>
<td id="Complete" class="drag" style="width:140px;height:50px">
</td>
<td id="Archive" class="drag" style="width:140px;height:50px">
</td>
</tr>
}
</table>
在这里,我想将 Ist 列中的图像移动到其他列并获取该列的 id.对于拖放,我使用脚本
Here i want to move image in Ist column to other column and get the id of that column. For drag and drop i use the script
<script type="text/javascript">
$(function () {
$(".draggable").draggable({ containment: '#imageboundary', axis: "x" });
$("#droppable").droppable({
drop: function (event, ui) {
$.ajax({
type: "POST",
url: '/Project/AddToPhase/' + $(ui.draggable).attr("id") ,
success: function (data) {
$('.result').html(data);
}
});
}
});
});
</script>
推荐答案
要获取可拖动元素和可放置元素的 id,请使用以下命令:
To get the id of both the draggable and the droppable elements use the following:
$('.selector').droppable({ drop: Drop });
function Drop(event, ui) {
var draggableId = ui.draggable.attr("id");
var droppableId = $(this).attr("id");
}
抱歉,您可能有点晚了,但我刚刚开始使用 jquery,需要确切的东西.
Sorry might be a little late for you but I have just started using jquery and needed the exact thing.
这篇关于jquery ui获取可放置元素的id,当放置一个项目时的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文