我有一个如下所示的项目列表:
<div id="draggablearea">
<ul>
<li><div class="title">Title 1</div>
<div class="content">Content 1. Probably a few hundred characters</div></li>
<li> ... </li>
</ul>
</div>
“内容”div 不可见,因为我的 css 包含此内容:
#content {display: none;}
现在,我使用 jquery-ui 使它们可拖动:
$(function(){
$("#draggablearea li").draggable();
.... (setting up droppable stuff)
到目前为止,一切都很好:所有内容都出现在我的可拖动列表中,并且按预期移动到我的可放置区域。
现在,我想更改功能,以便在放置事件中,标题变得不可见,而内容变得可见。
我已经尝试过这个:
$("#droppableArea").droppable({
accept: "#draggablearea li",
drop: function(event, ui){
ui.draggable.children(".content").appendTo(this);
}
});
但是它不起作用。正确的做法是什么?
(当对整个 ui.draggable
对象调用 appendTo()
时,整个 li
会移动到可放置区域。)
最佳答案
也许更像这样?
$("#droppableArea").droppable({
accept: "#draggablearea li",
drop: function(event, ui){
ui.draggable.children(".title").hide();
ui.draggable.children(".content").show();
}
});
关于JQuery 可拖动元素在放置时发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7656076/