draggable - 使 div 可拖动到新位置并停留在那里

Question

这是一个关于 Kendo UI 可拖动的新手问题。我试图查看他们的示例，但无法真正理解。

我想让一个 div 可拖动到另一个位置。设置时我可以拖动 div，但释放时它会消失，我希望它留在新位置。我已经尝试过了，但它不起作用。

$('.draggable').kendoDraggable({
    axis: "x",
    hint: Hint,
    dragstart: DragStart,
    drag: Drag,
    dragend: DragEnd
});


function Hint (element) {
    console.log("hint");
    return element;
}

function DragStart(){
    console.log("dragstart");
}

function Drag(){
    console.log("draging");
}

function DragEnd(event) { 
    console.log("dragend");
    console.log(event.x.location);
    $('.draggable').css({'left': event.x.location});
}

Answer 1

我想这就是你想要的，我为它做了一个 Demo。

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

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

.ob-hide {
    display: none;
}

.ob-clone {
    background: #cccccc;
}

<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>

<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>

jsFiddle：http: //jsfiddle.net/Wayou/fjrcw/