Drag and drop divs


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…


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.


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


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?


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.


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']


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

    dropEvent.dataTransfer = dragStartEvent.dataTransfer;


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;

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