[英]Applying jquery-ui droppable on nested lists
I am trying to use jquery droppable on a nested list, applying a change to the background colour of the li on hover. 我试图在嵌套列表上使用jquery droppable,在悬停时对li的背景颜色应用更改。 The problem is that it is only applying to the first item in a list. 问题是它只适用于列表中的第一项。 The alert is still alerting the text within the list item though. 但是,警报仍然会警告列表项中的文本。 Any ideas why this would be happening? 有什么想法会发生这种情况吗?
$("#mailbox li").droppable({
greedy: true,
hoverClass: 'mailbox-hover',
drop: function(event, ui) {
alert($(this).text());
}
});
[ Edit ] On some testing, the alert is working right, the hover class is being applied (according to fireBug) but it will only change the text-color when I hover over the first element. [ 编辑 ]在某些测试中,警报正常,正在应用悬停类(根据fireBug),但只有当我将鼠标悬停在第一个元素上时才会更改文本颜色。
<ul id="mailbox" class="filetree">
<li>
<span class="folder">imap@gazler.com
</span>
<ul>
<li id="0-INBOX">
<span class="folder">
</span>
<a href="#" onclick="changeFolder('0', 'INBOX', 'INBOX');" name="INBOX">INBOX
</a>
<ul>
<li id="0-INBOX-Drafts">
<span class="file">
</span>
<a href="#" onclick="changeFolder('0', 'INBOX.Drafts', 'Drafts');" name="INBOX.Drafts">Drafts
</a>
<li id="0-INBOX-Sent">
<span class="file">
</span>
<a href="#" onclick="changeFolder('0', 'INBOX.Sent', 'Sent');" name="INBOX.Sent">Sent
</a>
<li id="0-INBOX-Trash">
<span class="folder">
</span>
<a href="#" onclick="changeFolder('0', 'INBOX.Trash', 'Trash');" name="INBOX.Trash">Trash
</a>
<ul>
<li id="0-INBOX-Trash-New">
<span class="file">
</span>
<a href="#" onclick="changeFolder('0', 'INBOX.Trash.New', 'New');" name="INBOX.Trash.New">New
</a>
</ul>
</ul>
</ul>
</li>
[ css is comments ] - Also, possibly related, possibly a css error, it won't let me set the background-color of the li on hover, only font color. [ css is comments ] - 另外,可能是相关的,可能是css错误,它不会让我在悬停时设置li的背景颜色,只有字体颜色。
.mailbox-hover
{
background-color: #0000ff;
}
.mailbox-dropped
{
color: #ffff00;
}
[ solved ] - And finally, it won't let me alert ($(this).id) even though the all the list items have an id attached. [已解决 ] - 最后,即使所有列表项都附加了ID,它也不会让我发出警报($(this).id)。
This for alert: 这是警报:
alert($(this).attr("id"));
This for CSS: 这适用于CSS:
#mailbox li { background-color: #ffffff; }
#mailbox li.mailbox-hover { background-color: #0000ff;}
.mailbox-dropped { color: #ffff00; }
I'll continue to update this answer while we work through...easier formatting here. 在我们完成工作的过程中,我将继续更新此答案...这里更容易格式化。
My solution to nesting dropped items: 我对嵌套项目的解决方案:
// Make the drop_area div droppable
$("#drop_area").droppable({
accept: "#temp_item",
drop: function(event,ui){
// Get the id of the item that was just dropped
var id = ui.draggable.attr('id');
// Clone the item and append it to the drop area
$(this).append($(ui.draggable).clone());
// Remove the ability to drag the current item around
$('#temp_region').removeClass("dragg");
$('#temp_region').removeClass("ui-draggable");
// Create a new name for the dropped item
var $new_name = rnd();
$('#' + id).attr('id', $new_name);
// Remove the dropped item's CSS position directives
$('#' + $new_name).css('top', '');
$('#' + $new_name).css('left', '');
// Make the newly renamed item droppable so that nesting can take place
$('#' + $new_name).droppable({
accept: '*',
drop: function(e,ui){
if ( e.clientY < $(this).closest("div").position().top + $(this).closest("div").height() )
{
// Determine what is being dropped and onto what
var dropped_item = $(ui.draggable).attr('id');
var dropped_on = $(this).attr('id');
// Get the HTML of each item
var dropped_html = $('#' + dropped_item).html();
var dropped_on_html = $('#' + dropped_on).html();
// Remove the dropped item from the DOM
$('#' + dropped_item).remove();
// Append the dropped item into the item it was just dropped on
$('#' + dropped_on).append(ui.draggable);
// Remove the dropped item's CSS position directives
$('#' + dropped_item).css('top', '');
$('#' + dropped_item).css('left', '');
// Let the user move the dropped item
$('#' + dropped_item).draggable();
}
}
});
// Force the dropped item to only move around in the container
$('#' + $new_name).draggable({containment: '#drop_area'});
// All the user to snap items to each other for usability sake
$('#' + $new_name).draggable({
snap: true,
stop: function(event, ui){
}
});
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.