Question

我有一个看起来像这样的项目列表：

<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>

“content”div不可见，因为我的css包括：

#content {display: none;}

现在，我已经使用jquery-ui将它们拖放了：

$(function(){
    $("#draggablearea li").draggable();
    .... (setting up droppable stuff)

到目前为止，非常好：所有内容都出现在我的可拖动列表中，并按预期移动到我的可放置区域。

现在，我想更改功能，以便在drop事件中，标题变得不可见，内容变得可见。

我试过这个：

$("#droppableArea").droppable({
    accept: "#draggablearea li",
    drop: function(event, ui){
        ui.draggable.children(".content").appendTo(this);
    }
});

但它不起作用。什么是正确的方法？

（当整个li对象调用appendTo()时，整个ui.draggable会移动到可放置区域。）

Answer 1

我认为你需要让内容可见。正如你所说，整个div被移动所以它意味着内容div已经存在于doppablearea中。您只需将其显示样式设置为阻止或内联即可显示它。

您必须尝试以下内容。

ui.draggable.children(".content").css("display", "block")

Answer 2

也许更像这样的事情？

$("#droppableArea").droppable({
    accept: "#draggablearea li",
    drop: function(event, ui){
        ui.draggable.children(".title").hide();
        ui.draggable.children(".content").show();
    }
});

下载JQuery可拖动元素更改

2 个答案: