Gridstack.js: Gridstack still delete the Draggable items even Clone Helper is defined

[ardiansyaherwin]

Hi,

So, I'd like to create a drag drop of an infinite widget, let's say like clone instead of delete the item.
Currently, the dragged item is still deleted even I've already set its UI clone helper.

here's my code:

var options = {
cellHeight: 45,
disableResize: true,
verticalMargin: 10,
acceptWidgets: ".grid-stack-item",
float: false
};
$("#left-grid").gridstack(options);
$("#right-main-grid").gridstack(_.defaults({
float: true
}, options));
$(".palette .grid-stack-item").draggable({
revert: true,
handle: ".grid-stack-item-content",
scroll: false,
appendTo: "body",
helper: "clone"
});

Thanks in advance

[redstubble]

@elruinnou Did you get this working?

[ghost]

Hi, same issue, is it already fixed ?

[milladekilla]

Had a same issue, not sure if able in ur case, but if you wont init gridstack on the original it shouldnt delete the original node. It uses draggable, so just init this on original and pass the item class to the second grid you want to drag to. I think this feature is designed to move between gridstack instances, so make sense to remove the item from the original grid.

PS: you will probably also need to implement addWIdget on drop ...

[helloli]

Same problem. Hope to be solved.

I used vue and a special way to sovle this problem. The main idea is rerendering the template component when drop the template.

HTML:

<ul>
    <li class="aside-item">
        <a class="item-title" href="javascript:;" @click="fold = !fold">
            <i class="fa" :class="{'fa-caret-right': !fold, 'fa-caret-down': fold}" aria-hidden="true"></i>
            视图组件
        </a>
        <div class="item-content" v-show="fold" v-if="showItems">
            <div class="grid-stack-item" href="javascript:;" v-for="item in items">
                <div class="grid-stack-item-content" :class="item.id">
                </div>
            </div>
        </div>  
    </li>
</ul>

JS:

ready: function() {
    var self = this;
    var drag = function () {
        $(".grid-stack-item", self.$el).draggable({
            cursor: "move",
            helper: "clone",
            containment: self.containment || false, 
            scroll: false,
            revert: false,
            zIndex: 1,
            stop: function( event, ui ) {
                self.showItems = false;
                self.$nextTick( function () {
                    self.showItems = true;
                    self.$nextTick( function () {
                        drag();
                    });
                });
            }
        });
    }
    drag();
}

[phpip]

This demo file : demo/two.html

use : helper: "clone",
bug,it is not work

[radiolips]

This now works in v1.0.0 using helper: clone.

[MrEncrypter]

@radiolips is there an working example for clone?

[MrEncrypter]

        var zone_options = {
            width: 4,
            height: 2,
            animate: true,
            cellHeight: 100
        };
        $(editor).gridstack(zone_options);
    });

    var grid_options = {
        width: 1,
        height: 6,
        animate: false,
        cellHeight: 100,
        draggable: {
            helper: 'clone'
        }
    $(sidebar).gridstack(grid_options);

When I try to drag from sidebar into editor, I need the widget to stay in sidebar. Please help

[Crease29]

:+1: need also help on the same scenario as @murugan92

[radiolips]

@murugan92 @Crease29 are you two using the develop branch with the v1 code? I had this working a year ago. If you're having a problem, I can try to draw up an example.

[MrEncrypter]

@radiolips yes, im using the dev branch. if you can draw an example that would be very helpful for us. :)

[krydl]

we did it this way and it works

        $('.sidebar .grid-stack-item').draggable({
            revert: 'invalid',
            helper: "clone",
            handle: '.grid-stack-item-content',
            scroll: false,
            appendTo: 'body'
        });

you just have to make an css and a small sidebar with fix elements.
hope i can help you

[JamesFitch3]

Still not getting this to work on this end. The item from the "sidebar" (Called a "Well" in my code) ends up reappearing someplace weird ad partway into the other grid. Anyone know what I'm doing wrong?

extra styles just to put in some boxes:

<style>
        .grid-stack {
            border: 1px solid black;
            min-height: 100px;
            min-width: 100px;
        }

        .grid-stack-item {
            border: 1px solid black;
        }
    </style>

Markup:

<div class="grid-stack" id="WellGrid">
        <div class="grid-stack-item" data-gs-id="C88"
             data-gs-x="0" data-gs-y="0"
             data-gs-width="4" data-gs-height="1">
            <div class="grid-stack-item-content">
                ContentDrag
            </div>
        </div>
    </div>
    <hr />
    <div class="grid-stack" id="HeaderGrid">
        <div class="grid-stack-item" data-gs-id="C1"
             data-gs-x="0" data-gs-y="0"
             data-gs-width="4" data-gs-height="1">
            <div class="grid-stack-item-content">
                Content1
            </div>
        </div>
        <div class="grid-stack-item" data-gs-id="C2"
             data-gs-x="4" data-gs-y="0"
             data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content">
                content2
            </div>
        </div>
        <div class="grid-stack-item" data-gs-id="C3"
             data-gs-x="8" data-gs-y="0"
             data-gs-width="4" data-gs-height="1">
            <div class="grid-stack-item-content">
                Content3
            </div>
        </div>
        <div class="grid-stack-item"
             data-gs-x="0" data-gs-y="1" data-gs-id="C4"
             data-gs-width="4" data-gs-height="1">
            <div class="grid-stack-item-content">
                content4
            </div>
        </div>
    </div>

and js:

$(function () {
    var wellGridOptions = {
        cellHeight: 80,
        verticalMargin: 10,
        disableOneColumnMode: true,
        draggable: {
            revert: 'invalid',
            handle: '.grid-stack-item-content',
            scroll: false,
            appendTo: 'body',
            helper: 'clone'
        }
    };
    var headerGridOptions = {
        cellHeight: 80,
        verticalMargin: 10,
        disableOneColumnMode: true,
        acceptWidgets: true
    };
    $('#WellGrid').gridstack(wellGridOptions);
    $('#HeaderGrid').gridstack(headerGridOptions);
});