How can i drag a hidden child element

Question

I'm using Jquery-Ui for Drag and drop elements . From the left box i would like to drag a hidden elements to the right box. The result is: When i'm dropping the elements, they are appear (display:block) with them parents.

Link to JSFIDDLE

The problem is that i can't define a draggable behavior to a hidden element (in my project -> .content elements). * i am also using the sortable widget for that operation.

Left box elements :

<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>

The right box container:

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

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

 });

How can i dragging just the .content elements, when they are displayed none ?

My guess is you can't. Would setting it visibility: hidden; instead of display: none; be an option? — Jonas Grumann, Feb 09 '15 at 13:48
If an element is hidden, then you can't grab it, and you can't drag something you can't grab. You probably want a visible container element with invisible contents, though it doesn't sound like a particularly friendly UI design, — Roamer-1888, Feb 09 '15 at 13:58
@Roamer-1888 i know that its impossible to drag some element that doesn't display. i have a reason why i dont want to show this elements on the left side box.. that why i'm asking here if somebody know some trick or have a idea how to do this :) — Yaky Refael, Feb 09 '15 at 14:18
As I said, visible containers (LI elements) with invisible contents. Just make sure the LIs have some height so they don't collapse to nothing when their contents are hidden. You probably want also to give the LIs a border and/or background color to delineate them from their underlying background and from each other when the contents are hidden. — Roamer-1888, Feb 09 '15 at 14:29

score 1 · Accepted Answer · edited May 23 '17 at 12:05

A simple solution would be modifying the CSS to show only the elements with class .preview on the left list, and those with class .content on the right.

Working jsFiddle

Added only:

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

(And removed inline display: none styles)

Edit:

Because you insist on not having hidden DOM on the .right-list, you can use the technique shown here: jquery draggable +sortable with custom html on drop event?

You can search for the unwanted elements and replace them with the wanted 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);
        });
    }
});

Thanks for your answer . What i want in the end of the day is : container that contain just div.content elements. — Yaky Refael, Feb 09 '15 at 16:00

How can i drag a hidden child element

1 Answers1