Draggable element hidden outside container

Question

Using jQuery UI, I am trying to create an interface with two scrollable containers, each containing many draggable elements. The user can drag an element from one container to the other.

The dropping feature is not an issue. When dropped, the element is detached and recreated in the right place under its new parent.

My problem is that the draggable element cannot be displayed outside its container when the container has position:relative; applied, so while dragging, the element will disappear when it is moved outside the container boundaries.

This default behaviour makes sense, as normally the user would want to drag an element inside its container. As a workaround I had assumed the solution would be to use the draggable property 'appendTo', which I thought would move the element outside its container, but unfortunately this hasn't seemed to have had any effect.

DOM: (each view is scrollable and each container has position:relative and is as large as it needs to be to hold all elements)

BODY
    VIEW 1
        CONTAINER
            DRAGGABLE ELEMENTS
    VIEW 2
        CONTAINER
            DRAGGABLE ELEMENTS

Javascript:

$('div.card').draggable({
    appendTo: 'body',
    scroll: false //stops scrolling container when moved outside boundaries
});

Please see JSFiddle for a simplified explanation of the problem. I didn't want to bloat the example with droppable code, so this just illustrates the dragging issue. http://jsfiddle.net/Em7Ak/

Many thanks in advance.

score 64 · Accepted Answer · answered Feb 18 '13 at 17:16

64

I'm not sure if this will fix your exact problem, but I came across this question looking for the same answer and this is what I found.

In the options for .draggable(), pass in helper:'clone' to make a clone of the item automatically so that it can be dragged out of the container. And use appendTo:'body' to put it at the end of the <body> tag. So in my case, my options look somewhat like this, adding in revert:'invalid' to cause it to spring back if it isn't dropped somewhere valid:

jQuery(".myselector").draggable({
    helper: 'clone',
    revert: 'invalid',
    appendTo: 'body'
});

answered Feb 18 '13 at 17:16

Paul

3,748
1
25
28

2

the helper: 'clone' works for me, for the situation that the draggable item is invisible when it is dragged outside its parent boundary. – Kata May 29 '13 at 10:46
Katat sounds like you're missing the appendTo: 'body' part of the solution – Daniel Harvey Nov 22 '13 at 19:47
1

In my case this configuration has a remaining issue, the cloned element has absolute positioning like original element so it at top of page because draggable element is at top of its parent div in middle of page :-) I think I will have to look for a cloning enhancement... – barbara.post Jan 22 '16 at 13:08
Please note that, in my case, I had to add a `z-index`, too; others may have a similar problem. – Haroldo_OK Nov 28 '16 at 10:36

score 6 · Answer 2 · answered Oct 08 '15 at 00:49

use the "clone" helper and hide the item while dragging it and show it again on stop.

$(".removalbe-recom").draggable({
    appendTo: "body",
    helper: "clone",
    revert: "invalid",
    cursor: "move",
    containment: "document",
    zIndex: 10000,
    scroll:false,
    start: function (event, ui) {
    $(this).hide();
    },
    stop: function (event, ui) {
        $(this).show();
    }
});

score 5 · Answer 3 · edited May 23 '17 at 12:34

I had similar problem some months ago.

My need was to be able to use the auto scrolling of one big container from others

Here is my question for more details, JqueryUI, drag elements into cells of a scrolling dropable div containing large table

I found a workaround. The idea is to append the element clone to the scrollable container during the helper construction callback, then append the helper to the body using a setTimeout function after 1ms. The helper position must be mapped on the mouse position to avoid offset problem.

Here is my solution (JSFiddle seems to be down now, try it later if no code is displaying in the windows) : http://jsfiddle.net/QvRjL/134/

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },
        appendTo: 'body',
        containment: 'body',        
        scroll: true,
        helper: function(){ 
            //Hack to append the cartridge to the body (visible above others divs), 
            //but still belonging to the scrollable container  
            $('#container').append('<div id="clone" class="cartridge">' + $(this).html() + '</div>');   
            $("#clone").hide();
            setTimeout(function(){
                $('#clone').appendTo('body'); 
                $("#clone").show();
            },1);
            return $("#clone");
        }    
    });
});

score 0 · Answer 4 · answered Jan 04 '13 at 11:57

0

Add position:absolute to card style:

div.card {
    position:absolute;
    width:100px; height:50px;
    border:1px black solid;
    background-color:orange;
    text-align:center; vertical-align:middle;
}

answered Jan 04 '13 at 11:57

Saram

1,500
1
18
35

Thanks, this works until I apply position:relative to each of the containers. I have to use this property as the user can load in a pattern. I have altered my question and JSFiddle accordingly. – tomturton Jan 04 '13 at 14:27

Draggable element hidden outside container

4 Answers4

Linked