Dynamisches Grid beim Ziehen und Ablegen Bootstrap

Question

Meine Frage, wie würde ich ein dynamisches Raster erstellen, wenn Objekte über den Drop-Bereich gezogen/gezogen werden.

Ich möchte jquery UI verwenden, weil ich es nur für diese Funktion benötigen würde, und das ist eine Menge Code für nur eine Sache.

Ich möchte so etwas tun http://mcpants.github.io/jquery.shapeshift/ aber viel weniger kompliziert.

Ich werde einen Screenshot meines Rasters beifügen. Die Elemente, die ziehbar sind, sind "DDD".

Es ist eine AngularJS APP, und ich bin mit dieser Bibliothek für Drag & Drop: https://github.com/fatlinesofcode/ngDraggable

versucht diese Bibliothek zu verwenden, aber ich konnte es die Arbeit an: https://github.com/RubaXa/Sortable

Irgendwelche Vorschläge?

Answer 1

Ich bin derzeit ein Gitter und auch versucht, verschiedene Bibliotheken zu integrieren, ich habe eine codepen erstellt Ihnen das Arbeits Beispiel zu zeigen, wird diese

ich die Klasse habe mit Winkel- und Winkel gridster getan hinzugefügt ddd für die ziehbar Handler, Sie werden bemerken, ich den Handler in $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 Beispiel deklariert haben: codePen

Angular Gridster Library: angulargridster