gistfile1.js

Ember.Application.create({
  customEvents: {
  	draginit: 'dragInit',
  	/* Some events shadow regular dom events and thus don't need to be registered with Ember */
    // dragstart: 'dragStart',
    // drag: 'drag',
    // dragend: 'dragEnd',
    dropinit: 'dropInit',
    dropstart: 'dropStart',
    // drop: 'drop',
    dropend: 'dropEnd'
  }
});

App.DraggableView = Ember.View.extend({
	dragInit: function(event, dd) {
		dd.dropGroup = this.get('dropGroup');
        dd.targets = [];
	},
	dragStart: function(event, dd) {
        dd.set('payload', this.get('dragData'));
        dd.targets.forEach(function(dragTarget) {
        		dragTarget.set('highlighted', true);
        	});
	},
	dragEnd: function(event, dd) {
        dd.targets.forEach(function(dragTarget) {
    		dragTarget.set('highlighted', false);
    	});
	},
	setupDropGroup: function(group) {
		this.set('dropGroup', group);
	}
});

App.DroppableView = Ember.View.extend({
	init: function() {
		this.set('dropGroups', {});
	},
	dropGroups: null,
	setupDropGroup: function(type) {
		this.set('dropGroups.' + type, true);
	},
	dropInit: function(event, dd) {
		var validTarget = this.get('dropGroups')[dd.dropGroup];
		if(validTarget) {
			dd.targets.append(this);
		}
		return validTarget;
	}
});

App.DroppableMixin = {
	create: function(dropGroup){
		var init = function() {
				this._super();
				this.setupDropGroup(this.get('dropGroup'));
			};
		return Ember.Mixin.create(Ember.merge({
			init: init
		}, dropGroup));
	};
};

App.HotelSearchesPillDragMixin = App.DroppableMixin.create({
	dropGroup: "hotelSearchesPill"
});

App.DraggableHotelSearchView = App.DraggableView.extend(App.HotelSearchesPillDragMixin, {
    classNameBindings: ['controller.dragging'],

    dragStart: function(event, dd) {
        this._super.apply(this, arguments);
        if(!this.get('parentView.item.isActive')) {
            return false;
        }
		this.set('parentView.item.dragging', true);
        return this.get('parentView').$(".navbar-item-ghost"); 
    },

    dragEnd: function(event, dd) {
        this.set('parentView.item.dragging', false);
    },

    dragData: function() {
        var record = this.get('parentView.item'), store = record.get('store'), //
            searchModel = {
                hotelSearch: {
                    id: store.adapterForType(App.HotelSearch).generateIdForRecord(),
                    locationJSON: record.get('submittedLocationJSON'),
                    endDate: moment(record.get('endDate')).format('YYYY-MM-DD'),
                    startDate: moment(record.get('startDate')).format('YYYY-MM-DD'),
                    nights: record.get('nights'),
                    locationType: record.get('submittedLocationType'),
                    locationString: record.get('submittedLocationString'),
                    newSearch: record.get('newSearch'),
                    rooms: [],
                    maxChunkSize: record.get('maxChunkSize')
                }
            };
        record.get('roomSearchOccupancyInfo').forEach(function(item) {
            searchModel.hotelSearch.rooms.push(item.toJSON());
        });

        return JSON.stringify(searchModel);
    }.property().volatile()
});

App.AddNewSearchView = App.DroppableView.extend(App.HotelSearchesPillDragMixin, {
	drop: function(event, dd) {
        var searchModel = JSON.parse(dd.payload);
        if(searchModel.airSearch){
            this.get('controller').send('addNewHotelSearch', searchModel.airSearch);
        }

        if(searchModel.hotelSearch){
            if(this.$().find('[disabled]').length){
                //do nothing if the button to add a new search is disabled
                return;
            }
            $(this.get('parentView.element')).find('.navbar-item.active').removeClass('active');
            this.get('parentView.actionsTarget').addNewSearch(searchModel.hotelSearch);
        }
	}
});