[英]jquery ui How to get a id of a draggable item when i click on the droppable item
我已经尝试了好几天，但无法正常工作。 我想获取是可拖动项目的div（ ui-widget-content ）的ID，当我放下并单击已删除项目的div（ ui-widget-header ）时，但我无法使其正常工作。
<script>
$(document).ready(function () {
$("#j1, #j2, #j3, #j4, #j5, #j6").draggable();
$("#p1, #p2, #p3, #p4, #p5, #p6").droppable({
hoverClass: 'ui-state-hover',
helper: 'clone',
cursor: 'move',
drop: function (event, ui) {
$(this).addClass('ui-state-highlight');
$(ui.draggable).addClass('ui-state-highlight');
$(ui.draggable).draggable('enable');
console.log('Dragged: ' + alert(ui.draggable.attr("id")));
}
});
});
$('ui-widget-header').click(function () {
var item_id = ui.item.attr('id');
});
alert('item_id');
//$('.ui-droppable').click(function(){
// var myStringPosition = $('div'); // $(event.target).attr('id');
// $('.ui-droppable').each(function(){
// myStringPosition = $(this)[0].id;
// });
// alert(myStringPosition);
//});
</script>
</head>
<body>
<div id="j1" class="ui-widget-content" data-userid="1">Jogador 1</div>
<div id="j2" class="ui-widget-content">Jogador 2</div>
<div id="j3" class="ui-widget-content">Jogador 3</div>
<div id="j4" class="ui-widget-content">Jogador 4</div>
<div id="j5" class="ui-widget-content">Jogador 5</div>
<div id="j6" class="ui-widget-content">Jogador 6</div>
<div id="p1" class="ui-widget-header"><p>Posicao 1</p></div>
<div id="p2" class="ui-widget-header"><p>Posicao 2</p></div>
<div id="p3" class="ui-widget-header"><p>Posicao 3</p></div>
<div id="p1" class="ui-widget-header"><p>Posicao 4</p></div>
<div id="p2" class="ui-widget-header"><p>Posicao 5</p></div>
<div id="p3" class="ui-widget-header"><p>Posicao 6</p></div>
</body>
</html>
更新3 ：似乎没有一种方法可以确定可放置对象中包含哪个“可拖动”项目。 您将必须具有一种方法来记住已放入容器中的内容。 jQuery对象上的data()函数是一个很好的方法。
在放置功能中：
var itemId = $(ui.draggable).attr("id");
$(this).data('dropped', itemId);
在点击回调中使用：
if ($(item).data('dropped'))
{
alert($(item).data('dropped'));
}
注意：这只会记住最近放置的项目，并且一旦将其放入新容器中就不会将其删除-这应该易于实现。
更新2 ：以下内容应提供带有可拖动项ID的警报。 我将条件放在其中，以确定是否将其移到底部的容器中。
$('.ui-widget-content').click(function (event) {
var item = event.target;
if (item.offsetTop >= 140)
{
alert(item.id);
}
});
新提琴： http : //jsfiddle.net/KLLCg/7/
更新 ：看起来您想要不同的东西。 如果只需要目标容器的ID，则应该可以使用event.target.id来获取它。
drop: function (event, ui) {
$(this).addClass('ui-state-highlight');
$(ui.draggable).addClass('ui-state-highlight');
$(ui.draggable).draggable('enable');
var itemId = $(ui.draggable).attr("id");
var destId = event.target.id ;
var message = '"' + itemId + '" was dragged to "' + destId + '"';
alert(message);
console.log(message);
}
请参阅更新的小提琴： http : //jsfiddle.net/KLLCg/6/
原始答案
首先-您应将点击处理程序放入document.ready 。 我认为您可能会遇到问题，因为事件目标对象将是单击的任何内容，并且<p>元素没有ID。 如果我了解您的问题，则以下代码可能有效。
$('.ui-widget-header').click(function (event) {
var item = event.target;
if (item.nodeName == 'P') {
item = item.parentNode;
}
alert(item.id);
});
jsfiddle示例： http : //jsfiddle.net/KLLCg/3/
尝试这一操作您只需将拖动对象ID存储到“ dragId”中。
<!DOCTYPE html>
<link href='../../css/style.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src = "js/jquery.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.js"></script>
<head>
<style>
.dragAndDrop
{
}
.dragBoxStyle
{
position:absolute;
left:170px;
top:100px;
}
.dropBoxStyle
{
position:absolute;
left:170px;
top:300px;
}
.dragImageStyle
{
}
.dropImageStyle
{
}
</style>
<script>
var dragId;
$(function()
{
$(".dragImageStyle").draggable();
$(".dragImageStyle").mousedown(function()
{
dragId = (this.id);
});
$( ".dropImageStyle" ).droppable(
{
drop: function( event, ui )
{
alert("Droped on "+this.id+" : "+dragId);
}
});
});
</script>
</head>
<body>
<div id = "dragAndDrop">
<div id = "bg">
<img src = "images/BG.jpg"></img>
<div>
<div id = "dropTiles" class = "dropBoxStyle">
<img id = "drop1" class = "dropImageStyle" src = "images/Tab1_V.jpg"><img>
<img id = "drop2" class = "dropImageStyle" src = "images/Tab2_V.jpg"><img>
<img id = "drop3" class = "dropImageStyle" src = "images/Tab3_V.jpg"><img>
<img id = "drop4" class = "dropImageStyle" src = "images/Tab4_V.jpg"><img>
</div>
<div class = "dragBoxStyle">
<img id = "dragBox1" src = "images/BlankBox.png"><img>
<img id = "dragBox2" src = "images/BlankBox.png"><img>
<img id = "dragBox3" src = "images/BlankBox.png"><img>
<img id = "dragBox4" src = "images/BlankBox.png"><img>
</div>
<div id = "dragTiles" class = "dragBoxStyle">
<img id = "drag1" class = "dragImageStyle" src = "images/Tab1_N.jpg"><img>
<img id = "drag2" class = "dragImageStyle" src = "images/Tab2_N.jpg"><img>
<img id = "drag3" class = "dragImageStyle" src = "images/Tab3_N.jpg"><img>
<img id = "drag4" class = "dragImageStyle" src = "images/Tab4_N.jpg"><img>
</div>
</div>
</body>
基于具有项目ID的数组的jQuery可拖放计算错误
[英]jQuery draggable and droppable calculation based on an array with item ID's is wrong
jQuery可拖动项目在droppable.append（draggable）上的droppable中消失
[英]JQuery draggable item disappears in droppable on droppable.append(draggable)
当我放入可拖放的 div 时，如何从每个可拖动的 div 中获取 id
[英]How can i get id from each draggable div when i drop into the droppable div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.