JQuery UIを使ってみる―DroppableとResizable編―

JQuery UI第二弾です。今回はDraggable要素を受け入れるDroppable要素と、イメージのサイズを変更できるResizable要素を使って、色々試してみました。

ソースはJQueryのみです。

$(function () {
$('.box').draggable({
    opacity: 0.5,
    //イメージの移動ではなく、新しいイメージを動かせます。
    //helper: 'clone',
    //droppable以外だと、ひょいっと元の位置に戻ってくれます。
    revert: "invalid",
    drag: function (event, ui) {
        //イベントの設定です。適当に左辺の位置でもとってみました。
        console.log(ui.position.left);
    }
});
$('.target').droppable({
    accept: '.box',
    tolerance: 'fit',
    hoverClass: 'hover',
    drop: function (event, ui) {
        //ドラッグされたイメージがコピーされます。
        //ui.draggable.clone().appendTo(this);
        //acceptが指定されているイメージが重なったときのみ実行されます。
        console.log('dropped!');
    }
});
$('.resize').resizable({
    //どの辺、角からサイズを変更できるようになります。
    handles: 'all',
    aspectRatio: false,
    //サイズが変更されたときに、ランダムで色を変更します。
    stop: function (event, ui) {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var a = Math.random();
        var color = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        $(".resize").css("background-color", color);
    }
}).draggable();

Draggable

Target

Resize