Question

我使用Jquery-Ui拖放元素。从左侧框中我想将隐藏的元素拖到右侧框中。结果是：当我删除元素时，它们会与父母一起出现（显示：阻止）。

问题在于我无法为隐藏元素定义可拖动行为（在我的项目中 - ＆gt; .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); }); } });

如何拖动隐藏的子元素

1 个答案: