Kendo Ui像windows桌面一样可以拖动
我需要模拟拖放桌面图标,我这样做:
$(".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",eylocation); e.currentTarget.css("left",exlocation); } });
但我不确定是否是一个很好的方式和拖动回滚效果打破了我的解决方案。
Hava是一个使用KendoUI(No Jquery UI draggable)执行此操作的简单方法。
任何帮助!
我过去这样做如下:
定义了以下CSS样式
.draggable { position: absolute; background: #aaaaaa; width: 100px; height: 100px; vertical-align: middle; } .ob-hide { display: none; } .ob-clone { background: #cccccc; }
(你实际上只需要ob-hide)。
将可拖动定义为:
$('.draggable').kendoDraggable({ hint : function (original) { return original.clone().addClass("ob-clone"); }, dragstart: function (e) { $(e.target).addClass("ob-hide"); } });
定义要移动的区域:
$('body').kendoDropTarget({ drop: function (e) { var pos = $(".ob-clone").offset(); $(e.draggable.currentTarget) .removeClass("ob-hide") .offset(pos); } })
我的HTML是:
Drag 1 Drag 2