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 を使用してこれを行う簡単な方法 (Jquery UI をドラッグできません)。

どんな助けでも！

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 に答える