我决定用 html/javascript 创建我的第一个 windows 商店应用程序,因为你不能用 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 中更改脚本中的一些值(在上面的代码示例中),并获得了更多列以便框捕捉到..但最终它们都只是恢复到捕捉到第一列之一的底部。 ..我必须编辑引用的 js 文件吗?好像有4个,哪个?