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?

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?