jquery - Kendo Ui draggable like windows desktop -
i need simulate desktop icon drag , drop, this:
$(".draggable").kendodraggable({ container: $("#desktop"), hint: function() { homecoming $(".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 nice way , drag roll effect break solution.
hava simple way kendoui (no jquery ui draggable).
any help!
i did in past follow:
defined next css styles
.draggable { position: absolute; background: #aaaaaa; width: 100px; height: 100px; vertical-align: middle; } .ob-hide { display: none; } .ob-clone { background: #cccccc; } (you need ob-hide).
define draggable as:
$('.draggable').kendodraggable({ hint : function (original) { homecoming original.clone().addclass("ob-clone"); }, dragstart: function (e) { $(e.target).addclass("ob-hide"); } }); define area on 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> jquery drag-and-drop kendo-ui draggable
No comments:
Post a Comment