Membuat akordeon bootstrap sudutjs dan drag and drop berfungsi dengan baik

Saya menggunakan bootstrap accordion dan drag and drop sudut codef0rmer drag and drop

Secara individual, mereka berfungsi dengan baik, tetapi saya mengalami bug di mana jika saya memiliki elemen yang diperluas dan saya menggulir ke bawah lalu menjatuhkan yang dapat diseret ke yang dapat dijatuhkan di atas elemen akordeon, saya mendapatkan dua tetes, satu untuk droppable yang terlihat dan satu lagi untuk droppable yang telah di-scroll ke atas, tetapi di bawah droppable yang terlihat. Saya akan membuat biola nanti malam, tapi untuk saat ini, saya hanya akan mencoba mengilustrasikan masalahnya seperti ini:

droppable element //1

expanded accordion of droppable elements below

  droppable element //2

  droppable element //3

  droppable element //4

Ketika segala sesuatunya ditata seperti ini, semuanya berjalan dengan baik. Saya dapat menjatuhkan barang yang dapat diseret ke salah satu dari empat elemen, tanpa masalah. Tetapi jika saya menggulir, sehingga elemen 2, 3 atau 4 berada 'di bawah' elemen 1, kedua elemen, 1 dan katakanlah elemen 3, akan menerima drop. Bagaimana saya bisa membuat elemen yang 'di bawahnya' mengabaikan penurunan? Saya sudah mencoba menambahkan $observe dalam fungsi tautan dari arahan yang membuat elemen yang dapat dijatuhkan (2, 3, 4), tetapi tidak ada atribut, (tampilan, visibilitas), yang saya coba ubah. Tak satu pun dari opsi DnD lainnya yang tampaknya memberikan banyak bantuan.

Saya tahu ini mungkin sulit untuk divisualisasikan, saya akan membuat biola dalam beberapa jam untuk mengilustrasikan masalahnya lebih lanjut, tetapi saya harus beralih ke hal lain sekarang.

Ini kode saya:

Menandai

    <span>Draggables
<ul>
    <li jqyoui-draggable data-drag="true" ng-model="draggables" ng-repeat="drag in draggables">{{drag}}</li>
</ul>
</span>
<div jqyoui-droppable="{onDrop:'dropComplete(1)'}" data-drop="true" ng-model="listItems">Droppable target</div>
<div style="height: 100px; overflow-y: scroll;">Collapsible Items
    <ul collapse="false" >
        <li jqyoui-droppable="{onDrop:'dropComplete(2)'}" data-drop="true" ng-model="listItems" ng-repeat="item in listItems">{{item}}</li> 
    </ul>
</div>

js:

'use strict';

angular.module('dndApp')
  .controller('AboutCtrl', function ($scope, $window) {

    $scope.listItems = [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4',
      'Item 5',
      'Item 6',
      'Item 7',
      'Item 8',
      'Item 9'
    ];

    $scope.draggables = [
        'Drag 1',
        'Drag 2'
    ];

    $scope.dropComplete = function(event, ui, item){
        $window.alert(item);
    };
  });

aplikasi.js:

'use strict';

 angular
  .module('dndApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngDragDrop',
    'ui.bootstrap'
  ]);

Jalankan kode dan gulir daftar item ke atas. Lalu seret barang yang dapat diseret ke 'Item yang Dapat Dijatuhkan'. Anda akan mendapatkan dua peringatan. Satu untuk 'Item yang Dapat Dijatuhkan' dan satu lagi untuk item daftar. Saya mencoba mengecualikan penurunan pada item daftar, ketika disembunyikan di bawah 'Item yang Dapat Dijatuhkan'.


angularjs draggable
person Lazloman    schedule 17.03.2015    source sumber
comment
Berikut adalah plunkr yang menggambarkan masalahnya: plnkr.co/edit/55kngVrch1EAxbVoTRlF?p=info   -  person Lazloman    schedule 24.03.2015

Jawaban (1)


arrow_upward
2
arrow_downward

Jadi, saya bisa memperbaikinya dengan menggunakan yang berikut ini:

var parentTop = angular.element(event.target).parent()[0].getBoundingClientRect().top;

// Check to see if the item has been scrolled above it's parent and hidden
if (parentTop > elemTop) {
    // if the droppable is below another droppable, just remove the draggable from the model
    containter.splice(container.length - 1, 1);
} else {
    // Otherwise do post processing
}
person Lazloman    schedule 20.03.2015