2

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!

1 Answer 1

4

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.