如何拖动隐藏的子元素答案

【问题标题】：How can i drag a hidden child element如何拖动隐藏的子元素
【发布时间】：2015-02-09 13:43:51
【问题描述】：

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

问题是我无法将可拖动行为定义到隐藏元素（在我的项目中 -> .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 元素，当它们不显示时？

【问题讨论】：

我猜你不能。将其设置为可见性：隐藏；而不是显示：无；可以选择吗？
没有工作.. @JonasGrumann 。 :(
如果一个元素是隐藏的，那么你就不能抓取它，你不能拖动你不能抓取的东西。您可能想要一个包含不可见内容的可见容器元素，尽管它听起来不像是一个特别友好的 UI 设计，
@Roamer-1888 我知道拖动某些不显示的元素是不可能的。我有一个原因我不想在左侧框中显示这些元素.. 这就是为什么我在这里问是否有人知道一些技巧或知道如何做到这一点:)
正如我所说，可见的容器（LI 元素）具有不可见的内容。只需确保 LI 有一定的高度，这样当它们的内容被隐藏时它们就不会崩溃。您可能还希望为 LI 提供边框和/或背景颜色，以便在隐藏内容时将它们与它们的底层背景和彼此区分开来。

标签： jquery jquery-ui draggable jquery-ui-draggable jquery-draggable

【解决方案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);
        });
    }
});

【讨论】：

感谢您的回答。我最终想要的是：只包含 div.content 元素的容器。
工作如火！感谢您的解决方案@itay