标签: sortablejs

我正在尝试在使用Sortable library创建的可排序 HTML 列表上模拟拖放操作。它使用原生 HTML5 API 来实现可拖动元素和列表内的排序。

为了模拟这些拖动事件，我找到并修改了以下 JavaScript 代码：

var triggerSortableDragAndDrop = function (selectorDrag, selectorDrop, callback) {
  var DELAY_INTERVAL_MS = 10;
  var MAX_TRIES = 2;

  // fetch target elements
  var elemDrag = document.querySelector(selectorDrag);
  var elemDrop = document.querySelector(selectorDrop);
  elemDrag.setAttribute('draggable',"true");
  elemDrop.setAttribute('draggable',"true");
  elemDrag.href="#";
  
  var dragItems = document.querySelectorAll('[draggable=true]');


  if (!elemDrag || !elemDrop) {
    console.log("can't get elements");
    return false;
  }

  var startingDropRect = elemDrop.getBoundingClientRect();

  function rectsEqual(r1, r2) {
    return r1.top === r2.top && r1.right === r2.right && r1.bottom === r2.bottom && r1.left …

我有一个场景，我有多个带有标题的容器，然后是将在 vue.draggable 和页脚上使用的列表。

我已经设法将列表部分放在多个容器之间进行拖放操作，但前提是我将它们放在容器的列表区域中。

我的理想情况是可以在整个容器中放置，这样我也可以在页眉/页脚中放置一个列表项（可能默认将其添加到列表的位置 0）。

我已经尝试在列表项和父 div 上创建额外的 vue.draggable 自定义标签，但它没有帮助，因为现在我们可以拖动整个父 div。

这是我拥有的几个容器的基础的 vue 模板：

<template>
  <div class="container">
    <div class="header">
      <p>{{header}}</p>
    </div>
    <div class="body">
      <draggable class="drag-area" :list="items" group="default">
        <div v-for="item in items" :key="item.id">
          <drag-item :item="item"></drag-item>
        </div>
      </draggable>
    </div>
    <div class="footer">
      <p>{{footer}}</p>
    </div>
  </div>
</template>

有什么办法可以将拖动项拖到整个容器中吗？即把它放在页眉/页脚中？

我正在使用 vue 2.6.10 和 vuedraggable 2.23.0

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

<ul id="items">
    <li class="static">
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Static</div>
        <div class="clearboth"></div>
    </li>
    <li>
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Dynamic</div>
        <div class="clearboth"></div>
    </li>
    <li>
        <div class="image"><img src="image.jpg" /></div>
        <div class="text">Dynamic</div>
        <div class="clearboth"></div>
    </li>
</ul>

li有阶级的人static不应该被排序。其他的应该可以排序。

var el = document.getElementById('items');

var sortable = new Sortable(el, {
    onUpdate: function (evt) {
        var itemEl = evt.item;

        // here happens some stuff
    },
    filter: '.js-remove',
    onFilter: function (evt) {
        // here happens some …

我正在尝试将 vue-draggable ( https://github.com/SortableJS/Vue.Draggable ) 用于大量嵌套项目（组织树）。

由于有大量数据，用户需要能够在拖动时滚动。

据说支持 sortable.js 中的所有选项，但我不知道应该如何实现“自动滚动”。 https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll

我试过：

    import draggable from "vuedraggable";
    import { Sortable, AutoScroll } from 'sortablejs';

    Sortable.mount(new AutoScroll());

并在模板中：

    <draggable class="dragArea"
           tag="ul"
           :list="nodes"
           :group="{ name: 'g1' }"
           :scroll-sensitivity="250"
>
    <li class="drag rij" v-for="el in nodes" :key="el.id"
        {{ el.code }}
    </li>
</draggable>

我得到的错误是：

_sortablejs.AutoScroll is not a constructor

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

目前我也可以拖动,button#options这是不希望的

    <draggable v-model="textElements">
        <transition-group>
            <div class="is-draggable" v-for="element in textElements" :key="element.text">
                <div>
                    {{ element.text }}
                </div>
                <button class="btn btn-transparent">Options</button>
                <button class="btn btn-transparent btn-drag">Drag</button>
            </div>
        </transition-group>
    </draggable>

在文档中,他们提到我们可以放置:move="checkMove",<draggable>但在功能上我不知道如何检查究竟是什么被拖动？返回false可正常用于禁用拖动操作

methods: {
    checkMove(evt) {
        console.log(evt)
        return false
    }
}

Console.log(evt)显示了这一点,但我不确定我可以使用哪个属性来准确确定启动拖动的内容https://image.prntscr.com/image/r17zNkxoSWGdVQs_5nR09w.png

我正在使用 V-data-table 和 vuex 存储。以下是我如何配置 v-data-table 的要点

1. 对每列禁用排序
2. 将 v-data-table 项与 vuex 状态存储数据绑定
3. 使用 sortablejs 拖放行

问题： 当我拖放 v-data-table 中的行时，我正在更新 vuex 存储（使用表行索引值更新数组中对象的索引值）。Vuex 正在正确更新，但在 v-data-table 中呈现的数据与它们在 vuex 状态存储中的顺序不一致

有人可以帮助我吗

我试图克服这个问题的最好方法是强制重新渲染 v-data-table 组件，但是当我这样做时，我不能再拖放了

使用以下模板强制渲染

<template>
  <component-to-re-render :key="componentKey" />
</template>
// script
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

我正在使用 sortablejs 制作拖放列表。我想要两个按钮，一个输出列表元素的当前顺序，另一个仅将当前顺序重置回其原始状态。

我找到了一些关于如何打印当前订单以及如何重置它的资源，但由于我对 javascript 还有些陌生，所以我在实现它们时遇到了麻烦。

目前，我的警报只是输出[object HTMLUListElement]，我无法弄清楚重置。

代码如下。任何帮助，将不胜感激！

//Initiate sortable list
Sortable.create(simpleList, {
  animation: 150});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<!-- Simple List -->
<ul id="simpleList" class="list-group">
  <li data-id="i1" class="col-1">#1</li>
  <li data-id="i2" class="col-2">#2</li>
  <li data-id="i3" class="col-3">#3</li>
  <li data-id="i4" class="col-4">#4</li>
</ul>

<button type="button" onclick="alert($('#simpleList').toArray())">Current order!</button>
<button type="button" onclick="">Reset!</button>

</html>

我正在尝试建立一个“将单词按顺序排列”的典型语言学习活动。用户应该首先将句子的第一个单词拖到正确的位置，然后从那里继续。同时，我正在检查下一个单词是否在正确的位置。如果是这样，该单词/项目将更改 CSS 类，并且变得不可拖动并且具有不同的背景颜色。

为了发生此 CSS 类更改，我克隆可拖动的单词列表，进行必要的更改，然后使用新的更新列表设置 State()。这就是我遇到问题的时候。列表和组件偶尔会更新，似乎是随机的。当我尝试更新 handleDragEnd() 方法中的单词列表时，我一定做错了什么。这是代码的一部分：

export default class Sentence extends Component {
  constructor(props) {
    super (props)
  
    // prepare this.state.list to be used by SortableJS
    let list = this.props.sentenceShuffled.map((word, index) => {
      return { id: (++index).toString(), name: word, class: 'sortable' }
    })

    this.state = {
      currentCorrectWord: 0, // stores how many words are correct already while student is sorting
      complete: false, // becomes true when sentence is sorted
      list: list // this object is used …

我正在尝试vuedraggable使用 Vuetify Cards来实现，但由于某种原因，当卡片在一行中时拖放不起作用，但当它们在列中时起作用。

看看这个有效的CodeSandbox。

在Parent.vue文件中，如果我移除组件的<v-layout> </v-layout>包装<HelloWorld />，卡片会进入一列，拖放会再次开始工作。

这是我的 HelloWorld 组件：-

<template>
  <v-flex xs4>
    <v-card class="mx-4">
      <v-img :src="src"></v-img>
      <v-card-title primary-title>
        <div>{{title}}</div>
      </v-card-title>
    </v-card>
  </v-flex>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    title: String,
    src: String,
    id: Number
  },
  data() {
    return {};
  }
};
</script>

这是我的父组件：-

<template>
  <v-container>
    <v-layout class="mt-5 align-center justify-center row fill-height">
      <h2>Parent Component</h2>
    </v-layout>
    <draggable v-model="draggableCards">
      <v-layout>
        <template v-for="(tech,i) in getCardArray">
          <HelloWorld :src="tech.src" :title="tech.title" :key="i"/>
        </template> …

问题

我正在使用SortableJS构建一个可拖动的树组件。这意味着我的每个sortable-items 都有 atoggle-arrow作为打开和关闭 a 的子元素sub-tree（如果有的话）。

我试图用它来阻止在单击时stopPropagation()选择父项，但它不起作用。sortable-itemtoggle-arrow

关闭时看起来像这样：

打开时看起来像这样：

您在打开状态下看到的蓝色突出显示（第二张图片）是我selectedClass在使用multiDrag插件时为选项选择的样式。

这说明当我单击它时，它会导致选择toggle-arrow父级。sortable-item

我不希望这种事发生。

代码

我的 SortableJS 树组件中的项目代码如下所示（使用 Vue.js 和 Pug 语法）：

div.sortable-item
    div.content
        div.toggle-arrow(@click.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree

然后我有一个用于@click绑定我的toggle-arrow元素的处理程序：

toggleTree = function($event) {
    $event.stopPropagation()
    /// Code for handling the sub-tree toggling goes here.
    /// The sub-tree toggling itself works just fine.
}

您可以看到我声明@click.stop为事件绑定，这应该阻止click事件从子元素冒泡toggle-arrow，但它不起作用。 …