Jquery 剑道Ui像windows桌面一样可拖动_Jquery_Drag And Drop_Kendo Ui_Draggable

Jquery 剑道Ui像windows桌面一样可拖动

jquery kendo-ui

Jquery 剑道Ui像windows桌面一样可拖动,jquery,drag-and-drop,kendo-ui,draggable,Jquery,Drag And Drop,Kendo Ui,Draggable,我需要模拟桌面图标拖放，我可以这样做： $(".draggable").kendoDraggable({ container: $("#desktop"), hint: function() { return $(".draggable").clone(); }, dragend:

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

    $(".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（没有可拖动的jQueryUI）有一个简单的方法

任何帮助

我过去是这样做的：

定义了以下CSS样式

.draggable {
    position: absolute;
    background: #aaaaaa;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

.ob-hide {
    display: none;
}

.ob-clone {
    background: #cccccc;
}

（实际上，您只需要隐藏对象）

将可拖动定义为：

$('.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>


拖动1
拖动2

我过去是这样做的：

定义了以下CSS样式

.draggable {
    position: absolute;
    background: #aaaaaa;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}

.ob-hide {
    display: none;
}

.ob-clone {
    background: #cccccc;
}

（实际上，您只需要隐藏对象）

将可拖动定义为：

$('.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>


拖动1
拖动2