CODEWITHSUNDEEP
jquerydrag-and-dropkendo-uidraggable
JoeLoco
JoeLoco

Reputation: 2204

Kendo Ui draggable like windows desktop

I need to simulate a desktop icon drag and drop, i do this:

    $(".draggable").kendoDraggable({
                    container: $("#desktop"),
                    hint: function() {
                         return $(".draggable").clone();
                    },
                    dragend: function(e) { 
                         console.log(e);
                         console.log(e.currentTarget.attr("src"));
                         e.currentTarget.css("top",e.y.location);
                         e.currentTarget.css("left",e.x.location);
                    }                      
    });

but im not sure if is a nice way and the drag roll back effect break my solution.

Hava a simple way to do this with KendoUI (No Jquery UI draggable).

Any Help!

Upvotes: 2

Views: 2830

Answers (1)

OnaBai
OnaBai

Reputation: 40887

I did this in the past as follow:

Defined the following CSS styles

.draggable {
    position: absolute;
    background: #aaaaaa;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

.ob-hide {
    display: none;
}

.ob-clone {
    background: #cccccc;
}

(you actually only need ob-hide).

Define the draggable as:

$('.draggable').kendoDraggable({
    hint     : function (original) {
        return original.clone().addClass("ob-clone");
    },
    dragstart: function (e) {
        $(e.target).addClass("ob-hide");
    }
});

Define the area on which to move as:

$('body').kendoDropTarget({
    drop: function (e) {
        var pos = $(".ob-clone").offset();
        $(e.draggable.currentTarget)
                .removeClass("ob-hide")
                .offset(pos);
    }
})

My HTML is:

<body style="padding: 0; margin: 0; ">
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000">
    <div class="draggable">
        Drag 1
    </div>
    <div class="draggable">
        Drag 2
    </div>
</div>
</body>

Upvotes: 4

Related Questions