拖放功能在网络上越来越受欢迎,这是有充分理由的。拖放功能既直观又提供了令人愉快的用户体验。在本教程中,我们将了解如何使用以下方法构建自己的拖放组件钢网.在本教程中,我们将构建一个看板板,但这些原则可以用于构建任何类型的拖放体验。这是我们最终产品的样子。

上可以找到本教程的所有代码模板排序的Github回购在这里.如果你更喜欢看视频教程,我最近创建了一个视频,在视频中我讲述了整个过程。点击这里查看详情!

可分类的JS

构建拖放体验是非常困难的;为了帮助我们,我们将使用一个JavaScript库叫做可分类的JS.Sortable将帮助简化我们的拖放逻辑。

注意:本教程假设您有一个对用Stencil构建组件有基本的理解.本教程将重点介绍与实现拖放功能相关的方面。

开始

和往常一样,我想先了解一下我们的组件在html文件中的样子。在本教程中,我们将构建两个元素。我们会有一个drag-and-drop-container与一个container-title然后,作为那个容器的子容器,我们会有一些draggable-item年代。draggable-item组件可以是我们想要的任何东西,但在本教程中,我将使它成为看板上的一个任务。为此,我将提供一个task标题交货期,assignee-avatar.这个支架现在将作为我们建造这些组件的指南。

<拖放容器container-title="Backlog"> <拖放容器task-title="编辑教程视频" due-date="12/25/21" assign -avatar="https://avatars.dicebear.com/api/micah/example0.svg">  

创建可拖动项

记住这一点,让我们继续创建我们的draggable-item组件。这个组件将主要用于演示。我们将把属性作为字符串,然后以有组织的方式呈现它们。让我们来看看。

@Component({tag: 'draggable-item', styleUrl: 'draggable-item.css', shadow: true,})导出类DraggableItem {@Prop() taskTitle: string;@Prop () dueDate:字符串;@Prop () assigneeAvatar:字符串;渲染(){返回(<主机> 

{这个。taskTitle}

{this. div class="bottom-row"> < img src ={。/>

);}}

让我们添加一些CSSdraggable-item.css文件。

:主机{显示:块;min-width: 300 px;填充:8 px;border - radius: 8 px;margin-bottom: 8 px;颜色:# 03060 b;背景:白色;}:主机(:悬浮){游标:指针;轮廓:1px solid #03060b;} h1 {font-size: 1.375rem; margin: 0; } p { font-size: 1rem; margin: 0; } .bottom-row { display: flex; align-items: flex-end; gap: 8px; } ion-icon { font-size: 1rem; } img { height: 32px; width: 32px; padding: 2px; border-radius: 50%; border: 1px solid black; margin-left: auto; }

我们的draggable-item只由标记和样式组成因为我们所有的拖放逻辑都将放在drag-and-drop-container组件。通过将我们所有的业务逻辑放在那里,我们为自己提供了一个非常灵活的设置,任何组件都可以成为一个可拖动的项目,只要放在drag-and-drop-container

创建拖放容器

让我们开始构建我们的drag-and-drop-container通过创建一个新的Stencil组件。首先我们来看一个道具为我们的containerTitle并在渲染方法中显示它。

@Component({tag: '拖放容器',styleUrl: '拖放容器.css', shadow: true,})导出类DragAndDropContainer {@Prop() containerTitle: string;渲染(){返回(<主机> 

{这个。containerTitle} < / h1 > < /主机>);}}

接下来我们将添加一些样式drag-and-drop-container.css文件。

:主机{显示:flex;flex-direction:列;颜色:# 03060 b;背景:rgb(230,230,230);填充:8 px;border - radius: 8 px;} h1 {margin: 0;margin-bottom: 16 px;}

回到我们的组件,我们现在可以开始实现拖放功能了。我们要做的第一件事是在容器中创建一个可以拖动元素的区域。我将其命名为“可拖动区域”。我们可以通过加a来做div到作为这个区域的组件。我们将把我们的元素在这个div因此,容器的所有子容器都将包含在可拖动区域中。

渲染(){返回(<主机> 

{这个。containerTitle}

); }

使用合适的

接下来,我们将使用Sortable将拖放功能添加到可拖放区域。要做到这一点,Sortable需要一个对可拖动区域的引用。要创建引用,我们将创建一个名为容器把它分配给我们的div裁判属性。

导出类DragAndDropContainer {@Prop() containerTitle: string;私人容器:HTMLElement;渲染(){返回(<主机> 

{这个。containerTitle}

(this.container = el as HTMLElement)}>
); } }

说到Sortable,我们现在准备将它添加到我们的项目中。让我们通过npm安装Sortable。

npm安装sortablejs

中还需要添加Sortable脚本标记我们的index . html文件。

<脚本类型=“模块”src = " /构建/ sortable.esm.js " > < /脚本>

回到我们的drag-and-drop-container组件中,我们可以在文件的顶部导入Sortable。

从@stencil/core中导入{Component, Host, h, Prop};从'sortablejs'导入可排序表;

有了这些,我们就可以使用Sortable.create方法。

私人容器:HTMLElement;componentDidLoad () {Sortable.create(这一点。容器,{动画:150,});}

Sortable.create需要两个参数。第一个参数是我们想要转换为可拖动区域的元素,因此我们将引用传递给容器。第二个参数允许我们进行指定不同的选项这个我们稍后再讨论,但现在我们只将动画速度设置为150ms。

现在你可能想知道为什么我们把这个方块放在componentDidLoad方法。原因是,为了使用容器引用,我们必须等到它在渲染方法。一旦分配了,我们就可以利用它了。我们把这个放进去componentDidLoad因为它跟在我们后面渲染方法组件生命周期

使用Shadow DOM

如果您正在编写代码,您可能会注意到我们的拖放组件还不能工作,尽管所有部分似乎都已到位。这是许多开发人员的共同症结所在,这与我们使用DOM的影子.影子DOM同时提供样式和DOM封装。因此,Sortable无法进入和操作组件中的DOM节点。幸运的是,我们可以通过更改使组件更灵活一些影子作用域在组件装饰器中。

@Component({tag: '拖放容器',styleUrl: '拖放容器.css', scoped: true,})

在这样做的过程中,我们仍然得到了样式封装,现在Sortable能够操作组件中的元素。

跨容器拖动元素

现在我们的拖放组件可以独立工作,但是如果我们想在不同容器之间拖放元素呢?幸运的是,Sortable有一个解决方案。我们可以用一个叫做集团然后设置集团选项Sortable.create方法。

导出类DragAndDropContainer {@Prop() containerTitle: string;@Prop()组:字符串;私人容器:HTMLElement;componentDidLoad () {Sortable.create(这一点。容器,{动画:150,组:this。group, ghostClass: 'ghost',});}

现在,drag-and-drop-containerS有相同的集团将能够共享元素。让我们回到index . html文件,看看在实践中是什么样子的。

< drag-and-drop-container container-title =“积压”=“看板”> < draggable-item task标题=“编辑教程视频”交货期=“12/25/21”assignee-avatar = " https://avatars.dicebear.com/api/micah/example0.svg " > < / draggable-item > < draggable-item task标题=”视频在Youtube上发布“交货期=“12/25/21”assignee-avatar = " https://avatars.dicebear.com/api/micah/example1.svg " > < / draggable-item > < / drag-and-drop-container > < drag-and-drop-container container-title = =“看板”“进步”组> < draggable-itemtask标题= "电影教程视频"交货期=“12/25/21”assignee-avatar = " https://avatars.dicebear.com/api/micah/example2.svg " > < / draggable-item > < draggable-item task标题=“推动代码Github交货期=“12/25/21”assignee-avatar = " https://avatars.dicebear.com/api/micah/example3.svg " > < / draggable-item > < / drag-and-drop-container > < drag-and-drop-container container-title = =“看板”“完成”组> < draggable-item task标题=“创建代码演示”交货期=“12/25/21”assign -avatar="https://avatars.dicebear.com/api/micah/example4.svg">   .

在这里,我创建了三个drag-and-drop-containerS,每个都有两个draggable-item的孩子。你会注意到每一个drag-and-container集团属性设置为“看板”。因为它们都共享同一个组,所以我们能够在这些容器之间拖放元素。

最后一个繁荣

为拖放组件添加一点样式,我们可以利用ghostClass选择Sortable.create.这个选项允许我们提供一个类名,我们可以使用它来设置可拖放元素所在的空间的样式。

componentDidLoad () {Sortable.create(这一点。容器,{动画:150,组:this。group, ghostClass: 'ghost',});}

现在我们可以进入draggable-item.css归档并添加一个样式,以便在鬼类被赋予我们的项目时应用。Sortable在拖动项目时将该类添加到项目中。

:host(.ghost) {background: rgba(76,72,255, 0.75);}

结论

这样,我们的拖放组件就完成了!对我来说,最令人兴奋的方面是,我们刚刚触及了我们可以用Stencil和Sortable做的事情的表面。所以从Github上下拉代码,看一看可分类的文档,然后去创造一些令人惊叹的东西。编码快乐!

注册爱奥尼亚通讯以获得最新的新闻betway东盟体育app和更新!

Baidu