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

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

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

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

@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'
  }
}

当组件的模板包含所有本机元素时，这种方法很有效。但是如果我的模板有定制的angular2组件，这将停止工作

看这个

@组件({
选择器：“sm cmd”，
模板：“”
})
出口级SMCommand{
}
@组成部分({
选择器：“我的应用程序”，
指令：[SMSortable，SMCommand]，
提供者：[]，
模板：`
这是一个可以排序的列表

项目1

项目2

项目3

`
})
导出类应用程序{
}

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

---

我无法对此进行进一步调试。有人能提供一些信息吗

问题其实很简单：因为您使用的是自定义元素

sm cmd

浏览器不知道要使用什么渲染模型（块或内联）。默认情况下，它应用inline one，这会导致元素维度发生冲突，因为在inline

sm cmd

中有块级别

p

。因此浏览器无法正确计算块尺寸

因此，解决方案是这个简单的CSS规则：

sm-cmd {display: block;}

还要确保在ngAfterViewInit钩子中初始化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());
            }
      });
  }
}

---

演示：

发布不工作的plunkr。不工作的plunk实际上在工作-链接错误？是的，不工作实际上在工作。奇怪的是，当我运行此plunk时它不工作。哪个浏览器？我支持Chrome49。

sm-cmd {display: block;}

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