Динамическая сетка при перетаскивании Bootstrap

Question

мой вопрос: как создать динамическую сетку при перетаскивании/удалении предметов по области сбрасывания.

Я хотел бы использовать jQuery UI, потому что мне понадобится это только для этой функции, и это много кода только для одной вещи.

Я хотел бы сделать что-то подобное http://mcpants.github.io/jquery.shapeshift/, но гораздо менее сложный.

Приложите снимок экрана моей сетки. Элементами, которые перетаскиваются, являются «ddd».

Это angularjs APP, и я использую эту библиотеку для перетаскивания: https://github.com/fatlinesofcode/ngDraggable

пытался использовать эту библиотеку, но я мог бы получить его на работу: https://github.com/RubaXa/Sortable

Есть предложения?

Answer 1

Я в настоящее время интеграции сетки, а также пробовал различные библиотеки, я создал codepen, чтобы показать вам рабочий пример, это делается с помощью углового и углового gridster

Я добавил класс ддд для перемещаемых обработчиков, вы заметите, что я объявил обработчик в $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> 

CodePen примере: codePen

углового Gridster Библиотека: angulargridster