Question

考虑以下组件模板，我试图实现对角度材质2和简单li-tag重新排序列表元素的能力。

此功能适用于li-tag标签，但在md-list-item

的情况下无效

为什么会这样？

我的模板：

\1

被叫函数：

UserInput = input("Enter")
if UserInput == "yes":
print ("good job")
elif  print ("wrong"):
else:
   return

问题的屏幕截图：

click to view this image

当我拖动任何md-list-item浏览器时，在屏幕截图中可见，甚至从父组件开始拖动所有内容。

Answer 1

使用event.currentTarget代替event.target，因为md-list-item已嵌套div，而您需要移动md-list-item

/**
 * LIST ITEM DRAP ENTERED
 */
dragenter($event) {
    let target = $event.currentTarget;
    if (this.isbefore(this.source, target)) {
        target.parentNode.insertBefore(this.source, target); // insert before
    }
    else {
        target.parentNode.insertBefore(this.source, target.nextSibling); //insert after
    }
}


/**
 * LIST ITEM DRAG STARTED
 */
dragstart($event) {
    this.source = $event.currentTarget;
    $event.dataTransfer.effectAllowed = 'move';
}

并禁用涟漪效果

<md-list-item [disableRipple]="true"

只能拖动一个项目

<强> Plunker Example

使用HTML5拖放Angular材质2 md-list

1 个答案: