问题标签 [sortablejs]

我很难li在我的ul. 我正在使用SortableJS。

一个li类static不应该是可排序的。其他的应该是可排序的。

我知道你可以在jQuery UI 中进行排序，如下所示：

我怎样才能在 SortableJS 中做到这一点？

我正在开始一个新的、简单的 Angular 2.0 应用程序，并希望有可以拖动的项目列表。

Sortablejs似乎是一个很好的工具，但似乎有几个障碍。据我所知，我必须：

1) 使用ng-sortable将 Sortable.js 包装在 Angular 1 属性指令中。

2) 使用UpgradeAdapter将 Angular 1 元素指令用作 Angular 2 组件。

3) 使用升级工具周围的ngadapter包装器来启用除了组件指令之外的属性指令。

然后我需要包含所有文件并将所有说明混合在一起。

从angular-cli生成的应用程序开始，我生成了一条路线，并安装了 npm ngadapter、angular、UpgradeAdapter 和 sortablejs。我将此添加到我的 index.html 文件中

我像这样创建了一个 upgrade_adapter.ts 文件

我将 main.ts 文件编辑为如下所示：

我确定这里有很多错误，但第一条错误消息是

• 找不到名称“角度”

我很确定答案在system.js 文档的页面中，但我没有得到它。你知道如何设置角度对象吗？我走在正确的轨道上吗？我没有与 Sortable 结婚，但我希望在尝试将其他库与 Angular 2 一起使用时会遇到同样的问题，并且想弄清楚如何去做。

有没有更好或标准的方法来使用不是为 Angular 2 制作的优秀 javascript 库？

我正在尝试在流星中使用 sortablejs 来动态创建包含可以从列表移动到列表的项目的列表。

我是这样安装的meteor npm install sortablejs --save

当div 在列表组 div内时，它正在<div class="list-group">使用多个 draggable ，但如果我在外部使用 以编程方式创建多个列表组 div，它就不起作用。<div class="list-group-item>{{#each...{{#each...

这是列表组 div内部{{#each...的示例代码：

这是列表组 div外部{{#each...的非工作代码：

这是模板...onRendered 函数：

请注意，浏览器不会在调试器上暂停，所以我猜第二个 Sortable.create 失败了。控制台中的错误是：

我正在使用 npm 包react-sortablejs。在我的组件中，我想disabled动态设置选项。现在我的组件看起来像这样：

该disabled值存储在 DB 中。如果该值更改，则应禁用/启用可排序。但是这种方式是行不通的。

该软件包基于RubaXa/Sortable. 在那里我可以像这样设置禁用选项：

但是我如何在反应组件中以动态方式做到这一点？

更新

按照我的做法，该disabled选项最初只是在渲染组件时设置的。如果渲染后值发生变化，则选项不变，因此如果值从true变为false，则 disabled-option 仍然保持为真。

我正在关注https://github.com/SortableJS/angular-sortablejs而 systemjs.config.js 是我卡住的地方。我有一个 ionic 3 angular 4 应用程序。

我在我的 assets/js/ 中创建了一个名为 systemjs.config.js 的脚本，然后将它作为 head 部分的最后一行包含在我的 index.html 中

但是，这样做它抱怨它找不到 System. 这是脚本 System.config(config); 中的最后一行。

如果我忽略上述步骤，那么我最终无法绑定 sortablejs 属性错误。我的 .ts 和 .html 如下所示：

.ts

app.module.ts

动态主页.ts

我正在使用Sortable.js，但遇到以下问题：

我有一个要排序的项目列表，我需要第一个元素比其他所有 3 个元素更宽。

为了做到这一点，我有以下CSS：

当我在第一个项目之后开始拖动任何项目时它工作正常，即使我用第一个项目切换它也能正常工作。

它创建以下标记：

但是当我从第一个开始拖动时，我会丢失样式，因为插件会在其位置创建另一个项目并将其设置为display: none，因此:first-child选择器将不再起作用，并且它会丢失样式。

这个 gif显示了正在发生的事情。

我的第一个挑战是以某种方式跳过第一个元素，如果它是display: none，或者使用类似的东西:first-child:visible，但这显然不起作用。

有什么解决方法吗？

我正在使用SortableJS 的 Angular 绑定，以便拥有一系列拖放列表。当每个列表都包含在自己的组件中时，拖放是否可以工作？

在视觉层面上，我能够对列表中的项目进行重新排序。但是，列表之间转移的项目直到第二个项目转移后才会出现（请注意屏幕截图上部的“列表 2”缺少列表项目“2”，这是从“列表 1”转移的最后一个项目到“列表 2”）。

另一个问题是，通过拖放所做的更改都没有反映在列表的内容中——请注意“查看结果”部分中的列表如何与它们在上部分中的表示不匹配。

我目前有如下代码：

父组件：

包含可排序列表的子组件：

我将 Angular 5 与 SortableJs 结合使用。

在一个页面上，我列出了多张分组的卡片。

HTML看起来像

在我将一张卡片从一个组移动到另一个组并单击编辑按钮后，它会将我重定向到可以编辑所选卡片的页面。

当它将我重定向到该页面时，不会执行构造函数和 ngOnInit。

在我单击一个元素后，这两个执行。

更新：Plunker 代码：https ://embed.plnkr.co/mCJGo60sxQLQohWRYC3O/

编辑：要查看问题，您需要将一个按钮从一组移动到另一组，然后单击您移动的同一个按钮。你会看到绑定没有完成。

如何设置只能.btn-drag拖动整行？我正在使用https://github.com/SortableJS/Vue.Draggable

目前我也可以拖动button#options不想要的

在文档中，他们提到我们可以放置:move="checkMove"，<draggable>但在功能中我不确定如何检查到底拖动了什么？返回 false 通常可以正常禁用拖动

Console.log(evt) 显示了这一点，但我不确定我可以使用哪个属性来准确确定是什么开始了拖动https://image.prntscr.com/image/r17zNkxoSWGdVQs_5nR09w.png

使用https://github.com/SortableJS/Vue.Draggable

我有一个关于如何实现将文件拖入文件夹的经典示例的问题。我看到该@change事件获取有关被拖动项目的数据，但不是关于它被拖动到的项目的数据。关于如何实现这一目标的任何想法？

这是一个或多或少的示例，但显然我希望能够以某种方式 重新分配file.folder_name内部。https://jsfiddle.net/u5nb48cs/2/onFoldersChange

谢谢！