I'm trying to do a drag & drop of a dynamically loaded components using
jquery. I want to be able to use the click event as well as ng-model on the
element, but it appears that ui.helper on droppable ignores them.
import {Component, DynamicComponentLoader, ElementRef, ComponentRef} from
'angular2/core';
declare var jQuery;
@Component({
selector: 'button-component',
template: `
<div>
<button class="btn btn-default" (click)="remove()">Remove</button>
</div>
`
})
export class ButtonComponent {
_ref: ComponentRef;
constructor(_element: ElementRef) {
var elem = jQuery(_element.nativeElement);
elem.draggable({
opacity: '.5',
cancel:false,
revert: 'invalid',
helper: 'clone'
});
jQuery('#dropHere').droppable({
drop: function( event, ui ) {
var newDiv = ui.helper.clone(true)
.removeClass('ui-draggable-dragging')
.css({ position: 'relative', left: 0, top: 0 });
jQuery(this)
.append(newDiv);
}
});
}
remove() {
this._ref.dispose();
}
}
Any ideas?
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
