การสร้างหีบเพลง bootstrap ของ Angularjs แล้วลากและวางเล่นได้อย่างดี

ฉันใช้ bootstrap accordion และการลากและวางเชิงมุม codef0rmer ลากและวาง

โดยแต่ละรายการทำงานได้ดี แต่ฉันพบข้อผิดพลาดที่หากฉันมีองค์ประกอบที่ขยายและฉันเลื่อนลงแล้ววางสิ่งที่ลากได้ลงบนสิ่งที่วางได้เหนือองค์ประกอบหีบเพลง ฉันจะได้สองหยด หนึ่งหยดสำหรับหยดที่มองเห็นได้และอีกหนึ่งหยด สำหรับ droppable ที่เลื่อนขึ้น แต่อยู่ใต้ droppable ที่มองเห็นได้ ฉันจะรวบรวมซอไว้ด้วยกันในเย็นนี้ แต่ตอนนี้ ฉันจะพยายามอธิบายปัญหาดังนี้:

droppable element //1

expanded accordion of droppable elements below

  droppable element //2

  droppable element //3

  droppable element //4

เมื่อสิ่งต่างๆ ถูกจัดวางเช่นนี้ ทุกอย่างก็ดำเนินไปด้วยดี ฉันสามารถวางสิ่งที่ลากได้ลงบนองค์ประกอบทั้งสี่ได้โดยไม่มีปัญหา แต่หากฉันเลื่อนไป องค์ประกอบที่ 2, 3 หรือ 4 นั้น 'อยู่ข้างใต้' องค์ประกอบที่ 1 ทั้งสององค์ประกอบ 1 และองค์ประกอบที่ 3 จะได้รับการดรอป ฉันจะทำให้องค์ประกอบที่ 'อยู่ข้างใต้' เพิกเฉยต่อการดรอปได้อย่างไร ฉันได้ลองเพิ่ม $observe ในฟังก์ชันลิงก์ของคำสั่งที่สร้างองค์ประกอบที่ดร็อปได้ (2, 3, 4) แต่ไม่มีคุณลักษณะใดเลย (การแสดงผล การมองเห็น) ที่ฉันพยายามเคยเปลี่ยนแปลง ดูเหมือนจะไม่มีตัวเลือก DnD อื่นใดที่สามารถช่วยได้มากนัก

ฉันรู้ว่านี่อาจเป็นเรื่องยากที่จะเห็นภาพ ฉันจะรวบรวมซอภายในสองสามชั่วโมงเพื่ออธิบายปัญหาเพิ่มเติม แต่ตอนนี้ฉันต้องย้ายไปที่สิ่งอื่นแล้ว

นี่คือรหัสของฉัน:

มาร์กอัป

    <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);
    };
  });

แอพ js:

'use strict';

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

เรียกใช้โค้ดและเลื่อนรายการสินค้าขึ้น จากนั้นลากสิ่งที่ลากได้ไปยัง 'รายการที่หล่นได้' คุณจะได้รับการแจ้งเตือนสองครั้ง หนึ่งรายการสำหรับ 'รายการที่หล่นได้' และอีกรายการหนึ่งสำหรับ listItem ฉันกำลังพยายามแยกการดรอปในรายการ เมื่อมันถูกซ่อนอยู่ภายใต้ 'รายการที่ดร็อปได้'


angularjs draggable
person Lazloman    schedule 17.03.2015    source แหล่งที่มา
comment
นี่คือเสียงสะท้อนที่แสดงให้เห็นถึงปัญหา: plnkr.co/edit/55kngVrch1EAxbVoTRlF?p=info< /ก>   -  person Lazloman    schedule 24.03.2015

คำตอบ (1)


arrow_upward
2
arrow_downward

ดังนั้นฉันจึงสามารถแก้ไขปัญหานี้ได้โดยใช้สิ่งต่อไปนี้:

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