Drag and drop divs

Design
1

I use pivotal tracker at work, and the owner finally saw it and asked: can we do that? I’m just wondering if anyone has experience creating a drag and drop type of interface in ember and any roadblocks I need to lookout for…

2

I’ve worked on a few apps that have drag and drop functionality. I found Emberella to be an excellent starting point for figuring out how to incorporate drag and drop using Ember idioms. Take a look at their ‘draggable’ and ‘droppable’ mixins.

3

@withinboredom I’ve been using jQuery’s draggable and sortable. Just call it from you view on didInsertElement

4

How can we write an integration test that does drag & drop?

For now I’m thinking of using jquery-simulate lib. How do you guys do it?

5

I’m looking at doing the integration test from rails, as there’s a really simple method in rspec. But I haven’t quite gotten to this part of the app yet.

6

Apologies, just noticed the reply asking for tips on integration testing. In the tests I wrote, I manually created a drop event and triggered it on the relevant element. This is the code taken from the test:

Ember.run(function() {
  var dropZone = $('#drop_zone');
  var dropEvent = $.Event('drop');
  dropEvent.dataTransfer = {
    files: [fileBlob],
    types: ['Files']
  };
  dropZone.trigger(dropEvent);
});
1 Like
7

I know this old, but wanted to post a solution that covers the drag portion of the drag-and-drop in addition to the drop, basically expanding on the above solution. The following works for my testing purposes:

Ember.run(function () {
    var dragItem = $('#library')
            .find('.library-list > li.content-item:first-of-type'),
        dropZone = $('.target-list li.target-container:first-of-type'),
        dragStartEvent = $.Event('dragstart'),
        dropEvent = $.Event('drop');

    // necessary if event handlers rely on dataTransfer
    dragStartEvent.dataTransfer = new DataTransferMock();
    dragItem.trigger(dragStartEvent);

    dropEvent.dataTransfer = dragStartEvent.dataTransfer;
    dropZone.trigger(dropEvent);

    dragItem.trigger('dragend');
});

The DataTransferMock is only necessary if the code being tested relies on that existing (JavaScript won’t let you instantiate the actual DataTransfer object). Here’s the code for that:

(function (exports) {
    var DataTransferMock = function () {};

    DataTransferMock.prototype.setData = function (format, data) {
        this[format] = data;
    };

    DataTransferMock.prototype.getData = function (format) {
        if (this.hasOwnProperty(format)) {
            return this[format];
        } else {
            return null;
        }
    };

    exports.DataTransferMock = DataTransferMock;
})(window);

Hope this helps anyone else attempting to test drag and drop.

1 Like