Açısal 2 (v2.0.0-beta.15) kullanarak sürükle ve bırak nasıl uygulanır

Question

Basit bir sürükle bırakma listesini açısal olarak uygulamak istiyorum; örneğin, siparişini değiştirebileceğim bir bakkal listesi.

Iv, https://github.com/akserg/ng2-dnd kullanmadan önce uygulamam ama benim açımızdan 2.0.0-beta.15 köşeli köşebent kullanıyorum ve şu anda onu güncelleyemiyorum bu yüzden bu sürümü destekleyen bir şey bulmak zorundayım. Iv bu kütüphanenin belirli görevlerini aramaya çalıştı ve verimime uygun bir şey bulamadı. Bu davranışa ihtiyacım var. the more specific example of this library is. Belki birisi bir şekilde biliyorum ki, kendim bile yapabilirim, yine de iyi olur, zaman kazanmak için bazı kütüphaneleri tercih ederim.

(im kullanarak typescript)

eğer orada bir listesini yeniden sıralanması için başka bir şekilde başka bir çözüm var ve çok kutsanmış olacak bir örnek verebilirim birisi.

Answer 1

: Eğer özel uygulamalarıyla ilgili bir anlaşma yapmak yoksa bu listeden bazı kütüphaneler kullanabilirsiniz

Tamam, bu yüzden fi Yanıtlayan herkese teşekkürler.

bana yardımcı cevap en ı NG2-DND vardı sorunu gidermek için nasıl oldu: Sadece devDependencies eklenen

:

"ng2-dnd" : "1.5.0" 

çalıştırmak npm install ve gitmek için iyi oldu ve kütüphaneyi github örneklerinde olduğu gibi kullanın. Bir component.ts sınıfı kurduğumda ve import {Dragula, DragulaService} 'den' ng2-dragula/ng2-dragula '' yi almayı denediğimde, bir sorun şimdi

Answer 2

Belirli bir düzeltmeyi Dragula 2 Github repo'dan kullanabilirsiniz.

1 - ng2-dragula Sil - package.json aç ve "dependencies"

2 ilerleyin - onlar

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007" 

3 RC.1 geçiş yapmadan önce son tamamlama ile Github bağlantısını ng2-dragula paket düzenle node_modules klasörünü ve birlikte senin package.json onu yeniden

npm install 

Answer 3

Angular 2 kullanarak sürükle ve bırakmaya izin vermenin en yaygın iki yolu vardır. İlk olarak Açısal tabanlı açık kaynak kitaplıklarından birini kullanır (birkaç tane vardır); ve ikinci sürükle ve bırak için jQuery UI kütüphanesi kullanıyor. Bazı araştırmalardan sonra çoğunun Açısal 1.x için yapıldığını ve hala ihtiyacım olan tüm özellikleri desteklemediğini tespit ettim.

Bu yüzden TypeScript kitaplıklarını kullanarak jQuery kullanarak sürükle bırak uygulamamı yapmaya karar verdim.

Sürükle & desteğini desteklemek için jQuery JavaScript dosyalarını projemde ve index.html dosyasında alıp bırakın. Angular + TypeScript projesinde kullanmadan önce jQuery dosyalarını aldıktan sonra, sürükle ve bırak için özel bir uygulama verecek olan jquery.d.ts ve jqueryui.d.ts gerektirir.

Adım

1 projesinin kök dizininde aşağıdaki komutları yürütün: Yukarıdaki komutlar

// install tsd 
npm install tsd -g 
// install jquery.d.ts 
tsd install jquery --save 
// install jqueryui.d.ts 
tds install jqueryui --save 

jQuery için tür spesifik eşleme kuracaktır burada gösterildiği gibi projenin klasörü yazarak içine.

• bileşeni olacak droppable konteyner
• bileşeni içine düştü izin veren bazı kap:

  

  Adım 2

  sürükleyip bırakın uygulanması için iki yönü vardır sürüklenebilir bileşen sürükleme izni

Uygulamamda, iki karenin arasında sürüklenebilen parçaların ve parçaların sürüklenebildiği pano karesi düşebilir. Bunu desteklemek için varolan kareyi (html şablonu) CSS sınıfı droppable-square'u ekleyin ve daha sonra kare yapmak için kullanılabilir. Ve satranç parçasını sürüklenebilir yapmak için CSS sınıfı draggable-piece'u ekleyin.

<div *ngFor="let files of Board.Files, let i = index"> 
    <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'"> 
    <span class="square-name">{{Board.Squares[7-i][j].SquareId}}</span> 
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div> 
    </div> 
</div> 

sürüklenebilir ve droppable uygulanması için Adım 3

, parçalar hareketli hale getirmek için mantığı vardır PieceMover adlı yeni bir sınıf oluşturdu. Aşağıdaki kod tabanında gösterildiği gibi CSS sınıflarının üzerinde sürüklenebilen &'u düşürülebilir kılar ve yalnızca karenin kareye değil de karenin üzerine düşmesine izin veren kısıtlamalar getirir. Taşıyıcıların üzerinde durduğu sürükle-bırakma işlemi sırasında yatılıyı göstermek için birkaç ek mantık vardır.

Bağımlılık Enjeksiyon - Eğik 2

Bağımlılık Enjeksiyon C# gibi herhangi zengin sunucu tarafı geliştirme dillerinin olarak Açısal 2. en değerli özelliklerden biridir, Java Bağımlılık desteklemek için IoC kapsayıcı olmasını sağlar Benzer şekilde Enjeksiyon, Açısal 2 DI sağlar. Bağımlılık Enjeksiyon, sınıflar arasındaki bağımlılıkları ayırmayı ve modüler gelişmeyi desteklemeyi sağlar. Sınıfın üstündeki PieceMover sınıf kodunda görüldüğü gibi, @Injectable() ile dekore edilmiştir; bu, Angular 2'nin DI kapsayıcısına bu sınıfın enjekte edilebileceğini gösterir. PieceMover sınıf kodunun ilk satırındaki Enjekte edilebilir ithalatı da dikkate alın. Bu durumda, BoardComponent olan tüketici sınıfı, Angular 2 DI konteyneri tarafından çözülmesi gereken belirli bağımlılıklara "sağlayıcılar" dizisini kullanır. Yapıcı, DI tarafından enjekte edilecek/çözülecek olan PieceMover tip parametresini alır. Yukarıda belirtilen bağımlılıkları çözdükten sonra, parçaların satranç karelerine taşınmasını sağlayan BoardComponent çağrı metodu MakePiecesMovable() yöntemini gösterdikten sonra.

UPD:

• ng2-draggable
• ng2-dragula