angularjs - meaning - sortable traduccion
Cuadrícula dinámica en arrastrar y soltar Bootstrap (1)
Mi pregunta es cómo crearía una grilla dinámica al arrastrar / soltar elementos sobre el área desplegable.
Me gustaría usar la interfaz de usuario de jquery, porque la necesitaría solo para esta característica, y eso es mucho código para una sola cosa.
Me gustaría hacer algo como esto http://mcpants.github.io/jquery.shapeshift/ pero mucho menos complicado.
Adjuntaré una captura de pantalla de mi cuadrícula. Los elementos que se pueden arrastrar son "ddd".
Es una aplicación angularjs, y estoy usando esta biblioteca para arrastrar y soltar: https://github.com/fatlinesofcode/ngDraggable
Intenté usar esta biblioteca, pero podría hacer que funcione: https://github.com/RubaXa/Sortable
¿Alguna sugerencia?
Actualmente estoy integrando una grilla y también probé varias bibliotecas, he creado un códec para mostrar el ejemplo de trabajo, esto se hace usando Angular y grillster
He agregado la clase ddd para los controladores arrastrables, notarás que he declarado el controlador en $scope.gridsterOpts.draggable.handle
<div ng-app="mainApp" ng-controller="mainCtrl">
<div gridster="gridsterOpts">
<ul>
<li gridster-item="item" ng-repeat="item in standardItems">
<div class="ddd">Handle</div>
{{ item }}
</li>
</ul>
</div>
</div>
<script>
var app = angular.module(''mainApp'', [''gridster'']);
app.controller(''mainCtrl'', [''$scope'', function ($scope) {
$scope.standardItems = [
{size: {x: 2, y: 1}, position: [0, 0]},
{size: {x: 2, y: 2}, position: [0, 2]},
{size: {x: 1, y: 1}, position: [0, 4]},
{size: {x: 1, y: 1}, position: [0, 5]},
{size: {x: 2, y: 1}, position: [1, 0]},
{size: {x: 1, y: 1}, position: [1, 4]},
{size: {x: 1, y: 2}, position: [1, 5]},
{size: {x: 1, y: 1}, position: [2, 0]},
{size: {x: 2, y: 1}, position: [2, 1]},
{size: {x: 1, y: 1}, position: [2, 3]},
{size: {x: 1, y: 1}, position: [2, 4]}
];
$scope.gridsterOpts = {
minRows: 2, // the minimum height of the grid, in rows
maxRows: 100,
columns: 6, // the width of the grid, in columns
colWidth: ''auto'', // can be an integer or ''auto''. ''auto'' uses the pixel width of the element divided by ''columns''
rowHeight: ''match'', // can be an integer or ''match''. Match uses the colWidth, giving you square widgets.
margins: [10, 10], // the pixel distance between each widget
defaultSizeX: 2, // the default width of a gridster item, if not specifed
defaultSizeY: 1, // the default height of a gridster item, if not specified
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
resizable: {
enabled: true,
start: function (event, uiWidget, $element) {
}, // optional callback fired when resize is started,
resize: function (event, uiWidget, $element) {
}, // optional callback fired when item is resized,
stop: function (event, uiWidget, $element) {
} // optional callback fired when item is finished resizing
},
draggable: {
enabled: true, // whether dragging items is supported
handle: ''.ddd'', // optional selector for resize handle
start: function (event, uiWidget, $element) {
}, // optional callback fired when drag is started,
drag: function (event, uiWidget, $element) {
}, // optional callback fired when item is moved,
stop: function (event, uiWidget, $element) {
} // optional callback fired when item is finished dragging
}
};
}]);
</script>
Biblioteca Angular Gridster: angulargridster