jquery - 如何拖动隐藏的子元素

Question

我正在使用 Jquery-Ui 来拖放元素。我想从左侧框中将隐藏元素拖动到右侧框。结果是:当我删除元素时，它们与它们的父元素一起出现(显示: block )。

Link to JSFIDDLE

问题是我无法定义隐藏元素的可拖动行为(在我的项目 -> .content 元素中)。* 我还使用可排序小部件来执行该操作。

左框元素:

<ul class="side_bar">
      <li class="side_bar_element">
          <div class="preview">preview text</div>
          <div class="content" style="display:none">The content that i want to copy</div>
      </li>
      <li class="side_bar_element">
          <div class="preview">preview text</div>
          <div class="content" style="display:none">The content that i want to copy</div>
      </li>
</ul>

右侧盒子容器:

<div id="right-box" class="wrapper"><div>

还有 Jquery:

 $('document').ready(function () {

    $(".wrapper").sortable({
        opacity: .55});

    $('.side_bar_element').draggable({
        connectToSortable: ".wrapper",
        cursor: "crosshair",
        cursorAt: {left: -20, top: -20},
        delay: 100,
        grid: [10, 10],
        helper: "clone",
        opacity: 0.55,
        zIndex: 100        
    });    

 });

当 .content 元素不显示时，我如何才能只拖动它们？

Answer 1

一个简单的解决方案是修改 CSS，使其仅在左侧列表中显示类 .preview 的元素，而在右侧列表中显示类 .content 的元素。

Working jsFiddle

仅添加:

#right-box .preview, #left-box .content {
    display: none;
}
#right-box .content, #left-box .preview {
    display: block;
}

(并删除了内联 display: none 样式)

<小时/>

编辑:

因为您坚持不希望在 .right-list 上隐藏 DOM，所以您可以使用此处显示的技术:jquery draggable +sortable with custom html on drop event?

您可以搜索不需要的元素并将其替换为所需的 DOM。

jsFiddle

$(".wrapper").sortable({
    revert: true,
    receive: function (event, ui) {
        $(this).find('li.side_bar_element').each(function () {
            var html = $(this).children(".content").html();
            $(this).replaceWith(html);
        });
    }
});