Sürükleyip bırakılan dinamik kılavuz Bootstrap

Question

Sorgulama, düşülebilir alan üzerindeki öğeleri sürüklerken/bırakırken nasıl dinamik bir ızgara oluşturabilirim?

jquery UI'yi kullanmak istiyorum çünkü sadece bu özellik için buna ihtiyacım vardı ve bu sadece bir şey için çok fazla kod.

http://mcpants.github.io/jquery.shapeshift/ gibi bir şey yapmak istiyorum ama çok daha az karmaşık.

Kılavuzumun ekran görüntüsünü ekleyeceğim. Sürüklenebilir öğeler "ddd" dir.

Bir angularjs APP olduğunu ve sürükle ve bırak için bu kitaplığı kullanıyorum: https://github.com/fatlinesofcode/ngDraggable

bu kütüphaneyi kullanmaya çalıştı, ama işe alabilir: https://github.com/RubaXa/Sortable

bir öneriniz?

Answer 1

Şu anda bir ızgara entegre ve aynı zamanda çeşitli kütüphaneler çalıştı, sana çalışma örneği göstermek için bir codepen oluşturduk, bu şimdiye sınıf ekledik Açısal ve açısal-gridster

kullanılarak yapılır ediyorum

codePen

Eğik Gridster Kütüphanesi: sürüklenebilir işleyicileri için ddd, ne $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 Örnek işleyicisi ilan ettik fark edeceksiniz angulargridster