我如何拖动隐藏的子元素

我正在使用Jquery-Ui拖放元素。从左侧框中，我想将隐藏的元素拖到右侧的框中。结果是：当我放弃元素时，他们与他们的父母出现（显示：块）。我如何拖动隐藏的子元素

的问题是，我不能定义一个可拖动的行为，一个隐藏的元素（在我的项目 - >。内容元素）。 *我也使用该操作的可排序小部件。

左框中的元素：

<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元素，当它们不显示时？

来源

2015-02-09 Yaky Refael

我的猜测是，你不能。将它设置为可见性：隐藏;而不是显示：无;是一个选择？ – 2015-02-09 13:48:48

没有工作.. @JonasGrumann。 :( – 2015-02-09 13:51:29

如果一个元素被隐藏，那么你不能抓住它，并且你不能拖动你不能抓取的东西。你可能想要一个可见的容器元素和不可见的内容，尽管它听起来不是特别的友好的用户界面设计， – 2015-02-09 13:58:20

一个简单的解决方案是修改CSS以仅显示左侧列表中类为.preview的元素以及右侧类为.content的元素。

Working jsFiddle

只加：

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

（除去内嵌display: none样式）

编辑：

因为你坚持不具有隐藏d OM上.right-list，您可以使用此处显示的技术：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); 
     }); 
    } 
});

来源

2015-02-09 14:35:42 Itay

感谢您的回答。我在一天结束时想要的是：只包含div.content元素的容器。 – 2015-02-09 16:00:52

像火一样工作！感谢您的解决方案@itay – 2015-02-09 20:29:52

我如何拖动隐藏的子元素

回答

相关问题