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>

“内容”股利是不可见的，因为我的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); 
    } 
});

但它不工作。什么是正确的方法来做到这一点？

（整个li移动到当appendTo()被称为整个ui.draggable对象可投放区域。）

答

也许更像这样？

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

这样做！谢谢。 – bdares

答

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

您将不得不尝试类似下面的内容。

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

JQuery的可拖动的元素含量变化上放置

相关推荐