Question

这是一个关于Kendo UI draggable的新手问题。我试着看看他们的例子，但真的不能得到它。

我想让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

我认为this就是你想要的，我为它做了一个演示。

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

使div可以拖到新的位置并留在那里

1 个答案: