2

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

    $(".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（No Jquery UI draggable）有一个简单的方法来做到这一点。

任何帮助！

4

1 回答 1

4

我过去这样做如下：

定义了以下 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>
于 2013-02-14T19:32:15.733 回答