jquery-ui - 将自定义组件与 Angular2 一起使用时，JQueryUI Sortable 不起作用

Question

我的目标是能够让用户对命令列表进行排序。我正在使用 Angular2/Typescript 开发我的应用程序。

所以我四处寻找基于 angular2 的库，这些库可能提供类似于 JQueryUI Sortable 的可排序功能，但找不到太多。

我遇到了 this SO post，它演示了如何将 JQuery 与 angular2 集成。使用这篇文章的一个解决方案中提供的 plunk，我可以使用 angular2 开发可排序的行为。看这个plunk .这按预期工作。

@Component({
  selector: 'my-app',
  directives: [SMSortable],
  providers: [],
  template: `
    <div>
      <p>This is a list that can be sorted </p>
      <div sm-sortable>
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
      </div>
    </div>
  `
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

我们的想法是定义一个指令，该指令将使用 JQueryUI sortable() API 将可排序行为应用于 native 元素。然后使用组件模板中的指令。

@Directive({
  selector: "[sm-sortable]"
})
export class SMSortable{

    constructor(el: ElementRef) {
        jQuery(el.nativeElement).sortable( {
              start: function(event, ui) {
                  console.log("Old position: " + ui.item.index());
              },
              stop: function(event, ui) {
                  console.log("New position: " + ui.item.index());
              }
        });
    }
}

当组件的模板包含所有 native 元素时，这很有效。但是，如果我的模板具有自定义 angular2 组件，它将停止工作。

查看此 not-working plunk .

@Component ({
  selector: 'sm-cmd',
  template: '<ng-content></ng-content>'
})
export class SMCommand {

}

@Component({
  selector: 'my-app',
  directives: [SMSortable, SMCommand],
  providers: [],
  template: `
    <div>
      <p>This is a list that can be sorted </p>
      <div sm-sortable>
        <sm-cmd><p>Item 1</p></sm-cmd>
        <sm-cmd><p>Item 2</p></sm-cmd>
        <sm-cmd><p>Item 3</p></sm-cmd>
      </div>
    </div>
  `
})
export class App {

}

在这种情况下，我可以拖动项目，但不能放下它。移动的项目恢复到其原始位置。我添加了 console.log 以查看排序期间开始和停止事件时的项目索引。该值保持不变。

我无法对此进行进一步调试。有人可以提供一些意见吗？

Answer 1

问题实际上很简单:因为您使用的是自定义元素 sm-cmd 浏览器不知道要使用什么渲染模型( block 或内联)。默认情况下，它应用内联 1，这会导致元素尺寸方面的冲突，因为内联 sm-cmd 中有 block 级 p。因此浏览器无法正确计算 block 尺寸。

所以解决方案就是这个简单的 CSS 规则:

sm-cmd {display: block;}

还要确保在 ngAfterViewInit Hook 中初始化 jQuery 插件:

@Directive({
  selector: "[sm-sortable]"
})
export class SMSortable{

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
      jQuery(this.el.nativeElement).sortable( {
            start: function(event, ui) {
                console.log("Old position: " + ui.item.index());
            },
            stop: function(event, ui) {
                console.log("New position: " + ui.item.index());
            }
      });
  }
}

演示: http://plnkr.co/edit/QEd9wozXSZlqT07qr51h?p=preview