我这里有这个代码。我有两个问题:
由于我找不到,我决定使用drop()函数,但现在,为什么该函数被调用两次?!我不想要那个!
$( "#sortable" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function( event, ui ) {
$(ui.draggable).editable(function(value, settings) {
return(value);
},{
tooltip : "Click to edit"
});
}
}).sortable({
revert: true,
receive: function(event, ui) {
$(this).children("li").each(function(index) {
$(this).attr("id", "content-" + index);
});
}
});
答案 0 :(得分:0)
我很好奇,所以我做了一些玩这个。
在我的测试中,我没有看到“接收”事件发生火灾。鉴于此,我查看了你的代码,似乎你想在新删除的时候设置id。所以,我确实把它放在一起:http://jsfiddle.net/ER5Jd/ - 用它来查看它在行动中添加ID并列出最后一个列表项ID。
排序并在排序后显示列表中的新最后一个。我希望它对你有所帮助。
注意:“drop”中的ui.helper是在屏幕上拖动的辅助项(可拖动的克隆集),但实际的克隆来自可拖动的。
我的加价:
<ul id='firstOne'>First
<li class='listItem'>oneF</li>
<li class='listItem'>twoF</li>
</ul>
<ul id='secondOne'>Second<span></span>
<li class='listItem'>oneS</li>
<li class='listItem'>twoS</li>
</ul>
我的代码:
$('#firstOne .listItem').draggable({
helper: 'clone'
});
giveId($('#secondOne'));// initial ids set
$("#secondOne").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
drop: function(event, ui) {
$(ui.draggable).clone().css('background-color', 'pink')
.attr('id', 'content-' + ($(this).find('.listItem').length + 1))
.appendTo(this).siblings().css('background-color', 'yellow');
showId($(event.target));
},
accept: '#firstOne .listItem'
}).sortable({
revert: true,
update: function(event, ui) {
showId($(event.target));
},
receive: function(event, ui) {
alert('receipt');
}
});
function giveId(list) {
list.find(".listItem").each(function(index) {
$(this).attr("id", "content-" + index);
});
showId(list)
}
// show the last items id
function showId(list) {
list.find('span').text(list.find('.listItem:last').attr('id'));
}