1

これは剣道 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});
}
4

1 に答える 1

4

これはあなたが望むものだと思います。そのためのデモを作成しました。

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

于 2013-03-28T09:45:26.150 に答える