将句柄与嵌套dragula和slice一起使用
是指在前端开发中，利用句柄（handle）来处理嵌套的拖拽操作，并结合dragula库和slice方法进行操作。
句柄（handle）是指在拖拽操作中用于触发拖拽行为的元素或组件。通过给指定的元素添加句柄，可以限定只有该元素被拖拽时才会触发拖拽行为，而不是整个元素。
dragula是一个轻量级的JavaScript库，用于实现拖拽操作。它提供了简单易用的API，可以轻松地将元素拖拽到其他容器中，并支持嵌套的拖拽操作。
slice是JavaScript中的一个数组方法，用于从一个数组中提取出指定范围的元素，返回一个新的数组。它可以用于对拖拽操作中的元素进行切片，以便进行特定的处理或操作。
将句柄与嵌套dragula和slice一起使用的场景可以是一个嵌套列表的拖拽排序功能。例如，一个包含多个可排序的列表，每个列表中又包含多个可排序的项。通过给每个列表项添加句柄，用户只能通过拖拽句柄来进行排序操作，而不会触发整个列表项的拖拽。
在实现这个功能时，可以使用dragula库来处理拖拽操作，通过设置句柄来限定只有句柄元素才能触发拖拽行为。同时，可以使用slice方法从拖拽的源列表中提取出被拖拽的项，然后将其插入到目标列表中的指定位置。
腾讯云提供了一系列的云计算产品，其中与前端开发相关的产品包括云服务器（CVM）、云存储（COS）、内容分发网络（CDN）等。这些产品可以帮助开发者搭建稳定可靠的前端开发环境，并提供高效的数据存储和传输能力。具体产品介绍和链接如下：
- 云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建和管理虚拟机实例。了解更多：https://cloud.tencent.com/product/cvm
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各类非结构化数据。了解更多：https://cloud.tencent.com/product/cos
- 内容分发网络（CDN）：通过在全球部署的加速节点，提供快速可靠的内容分发服务，加速网站和应用的访问速度。了解更多：https://cloud.tencent.com/product/cdn
以上是关于将句柄与嵌套dragula和slice一起使用的解释和相关腾讯云产品介绍。希望能对您有所帮助！
相关·内容
我希望在下面的嵌套dragula示例中添加句柄的使用，但这似乎是不可能的。任何想法如何修改脚本，使用手柄，而不是整个div是可拖动的： dragula([].slice.apply(document.querySelectorAll('.nested
浏览 6提问于2017-07-06得票数 1
我正在尝试用ng2-dragula实现一个动态树。我使用有序列表来显示，例如 <li> <ol [dragula]='categories</li> Category Two <li>
Category Th
浏览 0提问于2016-10-19得票数 0
1回答
ng2弯管和角管
、、
我有一个数据库中的值表，我用Dragula使其可排序。可以拖放表格行，一切似乎都像设计的那样工作。问题是，我将一个自定义管道应用于每行中的三个单元格值，以将其数据库值更改为人类可读的值(例如，将“n”更改为“Normal”，将“O”更改为“Off”，等等)。当我应用管道时，表格可以正确加载和显示；管道可以正常工作。但是，当我拖放时，发生drop事件时，表格会断开，应用了管道的值将变为空白。 当我删除管道时，表按预期运行，但值当然不是人类可读的。我的带有dragula指令
浏览 6提问于2019-04-18得票数 0
回答已采纳
对象文字只能指定已知属性，“Dragula选项”类型中不存在“移动”。(参数)句柄:任意
有办法同时使用这两种功能吗？
浏览 4提问于2019-02-18得票数 4
回答已采纳
我有一个使用ng2-dragula的Angular2组件，可以像这样拖放： selector: 'my-comp', DragulaDragulaService template: ` <div *ngFor="#item of items" [dragula我们是否有用于跨组件拖放的配置，或者这是ng
浏览 6提问于2016-03-14得票数 7
回答已采纳
我有一个angular2应用程序与typescript。我正在使用创建一个拖放应用程序。我被请求到，检查一个条件，如果条件是false，则恢复拖放，我从知道revertOnSpill，revertOnSpill:true可以将元素放回它的第一个位置。但是，，我不知道在 ng2-dragula中怎么可能。我在onDrop中暗示了这一点。constructor() {
t
浏览 3提问于2017-01-06得票数 5
回答已采纳
1回答
我正在开发一个网站，在那里我使用的组件。我希望用户能够通过上下拖动行来为每一行设置某种优先级。类似于的东西。我在他们的文档中找不到对使用拖动事件进行重新排序的支持。
浏览 2提问于2018-01-28得票数 8
使用和，我想用库拖放。指定dragula容器： <md-chip>Chip 1</md-chip>
<md-chip>Chip 2</md-chip我试图用dragula的方法来解决这个问题，但是拖放根本不起作用。constructor(private dragula: DragulaSer
浏览 4提问于2017-02-17得票数 3
回答已采纳
我可以使用ng2-dragula实现拖放功能，但我面临的问题是，它也会拖拽标题行，并且无法从拖拽的行中获取拖动行的值(其行数据)和上下行。 [dragulamouseleave) ="mouseLeave('div A')"
&
浏览 9提问于2018-06-22得票数 2
1回答
角自动滚动与拖放
、、、、
对于工作项目，当我将DOM元素拖到窗口的顶部或底部时，希望窗口向上或向下滚动。下面是一个将dom-autoscroller和 dragula 集成到我的应用程序中的示例，因为dragula中没有内置的autos-crolling。下面是一个和的例子，它们一起使用dragula和自动滚动器。当我把它放在一个处理拖放的组件上时，我会在控制台中得到以下TypeError：...followed由一个ERROR
浏览 6提问于2020-01-29得票数 2
回答已采纳
3回答
我正在用我的应用程序使用服务器渲染，在使用一个名为的dragula库的react扩展时遇到了一个问题。问题就在这里由于某些原因，这使用了document，因此在服务器端呈现过程中会导致错误，因为文档不存在，因此我需要一种只在document可用时包含它的方法，以便可以开始使用它。
浏览 8提问于2016-03-23得票数 1
回答已采纳
1回答
在dragula中，您有一个从一个容器到另一个容器的单向复制--我想在UI中使用它，将一个表示元素的符号拖到容器中，并让它生成"Real“--真正的交易是一个任意的不同元素。这其中的大部分都很简单：dragula([].slice.call(document.querySelectorAll('.container')), {</div>
<div id="c2"
浏览 4提问于2016-03-23得票数 8
回答已采纳
我已经能够成功地将ng2-dragula集成到我的项目中，但我仍然想不出如何制作一些div non draggable。我曾尝试使用一些css和htmls draggable="false"作为div，但没有成功。不管我写了什么，dragula之后都会插入它的指令，并覆盖所有内容。也许我错了..。例如： <div>1</div&g
浏览 0提问于2016-07-20得票数 3
回答已采纳
我有一个列表，我用它来拖放元素到另一个列表中。准确地说，我希望元素在从一个列表拖放到另一个列表后出现在两个列表中。
浏览 6提问于2018-12-04得票数 0
1回答
似乎无法实现ng2-dragula嵌套拖动和下降，即使人们似乎正在寻找“嵌套”障碍的解决方案，我个人无法通过这个障碍。我认为这是一个带有源dragula和多个目标Dra古拉的简单布局，其诀窍在于尝试拖放这些目标组("Client“实例在这里是可拖动的)。但是，当尝试实现任何moves、invalid、accepts dragula选项时，它们会触发大量
浏览 1提问于2018-06-29得票数 1
回答已采纳
TL;DR;我有没有定义深度的动态嵌套集，我需要能够在它们自己的父容器中对它们进行排序。drag', function() { }); }; 提到使用moves函数创建句柄，这可能会帮助我解决问题，但我从未从该函数或accepts函数获得日志。我尝试使用$post
浏览 2提问于2018-07-13得票数 0
回答已采纳
3回答
我试图拖放一种方式与复制与ng2 dragula，这是我的模板。`<div> <div class='container' id='no-drop' [dragula]='"first-bag"'><div>Drag/drop item 1</div>
</di
浏览 0提问于2017-04-19得票数 5
回答已采纳
1回答
我想要实现拖放在我的角度项目使用角-dragula模块()。然而，它似乎严重依赖于RequireJS。我已经有一段时间没有使用Require了，只是在一个或两个示例应用程序中。我是被困在不使用这个模块或添加需求，还是有一种方法来使用这个不需要？
浏览 1提问于2015-11-16得票数 13
回答已采纳
当我用.findOne().select("followers")切片并选择“不一起工作”。我可以自己使用，没有问题，但当我把它们放在一起，它只使用最后一个。您不允许一起使用片和选择吗？
浏览 9提问于2021-05-24得票数 1
回答已采纳
1回答
我正在生成div来进行这些对象的移动(容器和项)。
红色盒子是主要的div，黑色盒子是容器，蓝色盒子是物品。使用此html： <div *ngFor另一个问题:如果我将一个蓝色盒子移动到另一个黑匣子(容器)中，蓝色盒子就会消失，
浏览 2提问于2018-02-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
