我需要模拟桌面图标拖放，我这样做:
$(".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);
}
});
但我不确定这是否是一个好方法，并且拖拽回滚效果破坏了我的解决方案。
Hava 提供了一种使用 KendoUI 实现此目的的简单方法(不可拖动 Jquery UI)。
任何帮助!
最佳答案
我过去是这样做的:
定义了以下 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 是:
<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 - Kendo Ui 像 Windows 桌面一样可拖动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14880790/