剑道 Ui 像 windows 桌面一样可拖动 [英] Kendo Ui draggable like windows desktop
本文介绍了剑道 Ui 像 windows 桌面一样可拖动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要模拟一个桌面图标拖放，我这样做:
$(".draggable").kendoDraggable({容器:$("#desktop"),提示:函数(){返回 $(".draggable").clone();},拖链:函数(e){控制台日志(e)；console.log(e.currentTarget.attr("src"));e.currentTarget.css("top",e.y.location);e.currentTarget.css("left",e.x.location);}});但我不确定这是否是一个不错的方法，并且阻力回滚效果破坏了我的解决方案.
使用 KendoUI 提供一种简单的方法来执行此操作(不可拖动 Jquery UI).
任何帮助！
解决方案
我过去是这样做的:
定义了以下 CSS 样式
.draggable {位置:绝对；背景:#aaaaaa;宽度:100px；高度:100px；垂直对齐:中间；}.ob隐藏{显示:无；}.ob-克隆{背景:#cccccc；}(你实际上只需要隐藏).
将可拖动对象定义为:
$('.draggable').kendoDraggable({提示:函数(原始){return original.clone().addClass("ob-clone");},拖动开始:功能(e){$(e.target).addClass("ob-hide");}});定义移动区域为:
$('body').kendoDropTarget({下降:功能(e){var pos = $(".ob-clone").offset();$(e.draggable.currentTarget).removeClass("隐藏").offset(pos);}})我的 HTML 是:
<div id="drop" style="position: absolute; width: 100%; height: 100%; border: 2px solid #000000"><div class="draggable">拖动 1<div class="draggable">拖动 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!
解决方案
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>
这篇关于剑道 Ui 像 windows 桌面一样可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
