JQuery 可拖动元素在放置时发生变化
我有一个看起来像这样的项目列表：
<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 会移动到可放置区域。）
I have a list of items that look like this:
<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>
The "content" div is not visible, because my css includes this:
#content {display: none;}
Now, I've made them draggable using jquery-ui:
$(function(){
$("#draggablearea li").draggable();
.... (setting up droppable stuff)
So far, so good: everything is appearing on my draggable list, and is moving onto my droppable area as expected.
Now, I want to change the functionality so that on the drop event, the title becomes invisible, and the content becomes visible.
I've tried this:
$("#droppableArea").droppable({
accept: "#draggablearea li",
drop: function(event, ui){
ui.draggable.children(".content").appendTo(this);
}
});
But it's not working. What's the right way to do this?
(The whole li is moved to the droppable area when the appendTo() is called on the whole ui.draggable object.)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
也许还有类似这样的东西？
Perhaps something more like this?
我认为您需要使内容可见。正如您所说，整个 div 已移动，因此这意味着内容 div 已经存在于 doppable 区域中。您只需将其显示样式设置为块或内联即可使其可见。
您将不得不尝试类似以下的操作。
I think you need to make the content visible. As you said the whole div was moved so it means contents div is already present in the doppablearea. You just need to it visible by setting its display style to block or inline.
You will have to try something like the following.