0

最初の Windows ストア アプリを html/javascript で作成することにしました。javascript と listview ではドラッグ アンド ドロップできないため、代替手段を探しました。Windows ストア アプリは jquery をサポートしているので、Gridster を見つけました。ドラッグ可能な並べ替えを使用してグリッドに表示する jquery プラグインです。各アイテムはサイズ変更も可能です。これを Windows ストア アプリで使用したいと考えています。これは、私がブレンドに入力したコードのフィドルです。HTMLページに

var layout;
var grid_size = 100;
var grid_margin = 5;
var block_params = {
    max_width: 6,
    max_height: 6
};
$(function() {

layout = $('.layouts_grid ul').gridster({
    widget_margins: [grid_margin, grid_margin],
    widget_base_dimensions: [grid_size, grid_size],
    serialize_params: function($w, wgd) {
        return {
            x: wgd.col,
            y: wgd.row,
            width: wgd.size_x,
            height: wgd.size_y,
            id: $($w).attr('data-id'),
            name: $($w).find('.block_name').html(),
        };
    },
    min_rows: block_params.max_height
}).data('gridster');

$('.layout_block').resizable({
    grid: [grid_size + (grid_margin * 2), grid_size + (grid_margin * 2)],
    animate: false,
    minWidth: grid_size,
    minHeight: grid_size,
    containment: '#layouts_grid ul',
    autoHide: true,
    stop: function(event, ui) {
        var resized = $(this);
        setTimeout(function() {
            resizeBlock(resized);
        }, 300);
    }
});

$('.ui-resizable-handle').hover(function() {
    layout.disable();
}, function() {

    layout.enable();
});

function resizeBlock(elmObj) {

    var elmObj = $(elmObj);
    var w = elmObj.width() - grid_size;
    var h = elmObj.height() - grid_size;

    for (var grid_w = 1; w > 0; w -= (grid_size + (grid_margin * 2))) {

        grid_w++;
    }

    for (var grid_h = 1; h > 0; h -= (grid_size + (grid_margin * 2))) {

        grid_h++;
    }

    layout.resize_widget(elmObj, grid_w, grid_h);
}
});​

js 参照と css は、こちらのソースで確認できます (コードを入手した場所)。

http://jsfiddle.net/maxgalbu/UfyjW/show

私はそれを機能させ、ボックスをドラッグして並べ替え、サイズを変更できます...私の問題は、垂直ではなく水平に拡張する方法です..より多くのものを入れると、すべてが下に移動します. 新しいアイテムが追加されると（スタートメニューのように）右に拡大したいと思います...グリッドを反時計回りに回してアイテムを同じ向きに保つことができれば完璧です..しかし、そうではないかもしれません簡単に

HTMLのスクリプト（上記のコードサンプル）でいくつかの値を変更しようとしましたが、ボックスがスナップする列がいくつかありました..しかし、最終的にはすべて最初の列の1つの下部にスナップするように戻ります..参照されている js ファイルを編集する必要がありますか? 4つくらいあるけどどれ？

4

0 に答える 0