我如何拖动隐藏的 child 元素

Question

我正在使用 Jquery-Ui 拖放元素。我想从左边的盒子里拖一个隐藏的元素到右边的盒子里。结果是：当我放下元素时，它们与它们一起出现（显示：块）parents。

问题是我无法为隐藏元素定义可拖动行为（在我的项目中 -> .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 元素中拖动它们 none？

Answer 1

一个简单的解决方案是修改 CSS 以仅显示左侧列表中带有 class .preview 的元素，以及带有 class [=13= 的元素]右边。

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);
        });
    }
});

我如何拖动隐藏的 child 元素

How can i drag a hidden child element

jquery

jquery-ui

draggable

jquery-ui-draggable

jquery-draggable