Kendo Ui可拖动像Windows桌面 [英] Kendo Ui draggable like windows desktop
本文介绍了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）;
}
}）;
但我不知道如果是一个很好的方式，拖动回滚效果打破了我的解决方案。 p>
Hend一个简单的方式来使用KendoUI（没有Jquery UI draggable）。
任何帮助！
解决方案
我过去做过如下：
定义了以下CSS样式
.draggable {
position：absolute;
背景：#aaaaaa;
width：100px;
height：100px;
vertical-align：middle;
}
.ob-hide {
display：none;
}
.ob-clone {
background：#cccccc;
}
（实际上只需要ob-hide）。
定义draggable为：
$（'。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是：
< body style =padding：0; margin：0;>
< div id =dropstyle =position：absolute; width：100％; height：100％; border：2px solid＃000000>
< div class =draggable>
拖动1
< / div>
< div class =draggable>
拖2
< / div>
< / div>
< / body>
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!
解决方案
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>
这篇关于Kendo Ui可拖动像Windows桌面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
