Kendo Ui 像 windows 桌面一样可拖动答案

【问题标题】：Kendo Ui draggable like windows desktopKendo Ui 像 windows 桌面一样可拖动
【发布时间】：2013-02-14 17:39:27
【问题描述】：

我需要模拟一个桌面图标拖放，我这样做：

    $(".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);
                    }                      
    });

但我不确定是否是一种好方法，并且拖动回滚效果破坏了我的解决方案。

使用 KendoUI 有一个简单的方法来做到这一点（没有可拖动的 Jquery UI）。

任何帮助！

【问题讨论】：

标签： jquery drag-and-drop kendo-ui draggable

【解决方案1】：

我过去是这样做的：

定义了以下 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>

【讨论】：