标签: rubaxa-sortable

我的问题是如何在可放置区域上拖放项目时创建动态网格.

我想使用jquery UI,因为我只需要它来实现这个功能,而且这只是一个很多代码.

我想做这样的事情http://mcpants.github.io/jquery.shapeshift/但不那么复杂.

我将附上我网格的屏幕截图.可拖动的元素是"ddd".

它是一个angularjs APP,我使用这个库进行拖放:https://github.com/fatlinesofcode/ngDraggable

试图使用这个库,但我可以让它工作:https: //github.com/RubaXa/Sortable

有什么建议？

好的,我正在尝试使用RubaXa的Sortable插件.(这是一个很好的示例页面)

    var sort = new Sortable($('#items')[0], {
        animation: 150,

        onUpdate: function(evt/**Event*/){
            var item = evt.item;
            console.log(evt);
        }
    });

该插件工作正常.问题是如何获得元素被删除的索引？(例如,从列表的索引2到索引0)

演示: http ://jsfiddle.net/j7fesLkp/1/

我正在使用Rubaxas Sortable.js来排序列表.

我的问题是我只能将".group_container"移动到主要持有者的底部,而不是在其他列表之间移动.

继承人jsFiddle https://jsfiddle.net/adishardis/6csou39n/4/

<h1>Sortable</h1>

<div class="group" id="main">
  <div class="group group_container" id="group1">
    a
    <div class="question">item 1</div>
    <div class="question">item 2</div>
    <div class="question">item 3</div>
  </div>
  <div class="group group_container" id="group2">
    b
    <div class="question">item 4</div>
    <div class="question">item 5</div>
    <div class="question">item 6</div>
  </div>
  <div class="group group_container" id="group3">
    c
    <div class="question">item 7</div>
    <div class="question">item 8</div>
    <div class="question">item 9</div>
  </div>
</div>

我错过了什么？

我知道这很明显,但我无法弄清楚.

我正在使用Rubaxa/sortable,并希望在添加,删除项目或列表排序时使用ajax更新我的数据库.

    var editableList = Sortable.create(document.getElementById('editable'), {
    animation: 150,
    filter: '.js-remove',
    onFilter: function (evt) {
        evt.item.parentNode.removeChild(evt.item);
    },
    onSort: function(evt) {
        console.log(editableList.toArray()); // not working

    }
});

document.getElementById('addUser').onclick = function () {
    Ply.dialog('prompt', {
        title: 'Add',
        form: { name: 'name' }
    }).done(function (ui) {
        var el = document.createElement('li');
        el.innerHTML = ui.data.name + '<i class="js-remove">?</i>';
        editableList.el.appendChild(el);
    });
};

任何帮助表示赞赏.

我尝试创建具有以下功能的待办事项列表：

1. 可分类项目
2. 每个项目中的 WYSIWYG 编辑器
3. 待办事项模型中项目编辑器存储中的每个更改

我做了 1 和 2 但不能做 3。我只能更改任务数组中第一个任务的标题

这是我的代码

应用程序.js

Vue.directive('summernote', {
  bind: function() {
    this.editor = $(this.el).summernote({
      airMode: true,
      disableDragAndDrop: true,
      popover: {
        air: [
          ['style', ['bold', 'italic', 'underline', 'clear']]
        ]
      },
      callbacks: {
        onChange: function(contents, $editable) {
          vm.tasks[0].title = contents;
        }
      }
    });
  }
});

var vm = new Vue({
  el: '#todos',

  ready: function (value) {
    Sortable.create(this.$el.firstChild, {
      draggable: 'li',
      animation: 500,
      onUpdate: function(e) {
        var oldPosition = e.item.getAttribute('data-id');
        var newPosition = this.toArray().indexOf(oldPosition);
        vm.tasks.splice(newPosition, …

我正在使用JavaScript HTML5为拖放创建POC。但是在Edge浏览器上遇到一个奇怪的问题，即它在拖动html元素时显示“箭头”图标。

版本详细信息： Microsoft Edge 38.14393.0.0 / Microsoft EdgeHTML 14.14393

Drag-n-Drop Behavior:  https://codepen.io/kcak11/pen/zPgyBq

注意：在IE，Chrome，Firefox，Safari等任何其他浏览器上都不会发生这种情况。它是唯一显示此小箭头的Edge浏览器。有什么办法可以通过代码禁用此功能吗？

请提供建议。

（提前致谢）

截至2019年9月26日，此问题仍未解决。

我正在使用 Vue.Draggable：https : //github.com/SortableJS/Vue.Draggable

小提琴：https : //jsfiddle.net/o5pcLhhj/

我有两个列表设置和在它们之间拖动的能力。我在第二个列表中添加了一个 onAdd 事件，这样我就可以检测何时向该列表添加了某些内容：

onAdd: function(evt) {
  console.log(evt.item);
}

现在，如果我将“John”或“Joao”拖到第二个列表中，则该事件无法正确拾取被拖入的项目。它似乎偏离了一个索引。如果我将“Jean”拖进去，它会正确地选择这个项目。

我在这里做错了什么？！

小提琴：https : //jsfiddle.net/o5pcLhhj/

先感谢您！！

我正在使用vuejs和Rubaxa Sortable JavaScript库.可排序工作正常,<ul><li>但是对于表行,当我通过拖放重新排列时,它会出现此错误.

Sortable.min.js:3 Uncaught DOMException: Failed to execute 'matches' on 'Element': '>*' is not a valid selector.

我正在使用Vue.js v2.5.13和Rubaxa Sortable v1.7.0.

Vue.directive('sortable', {
  inserted: function (el, binding) {
    var sortable = new Sortable(el, binding.value || {});
  }
});
new Vue({
  el: '#app',
  data () {
    return {
      items: [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}]
    }
  },
  methods: {
    reorder ({oldIndex, newIndex}) {
      const movedItem = this.items.splice(oldIndex, 1)[0]
      this.items.splice(newIndex, 0, movedItem)
    }
  }
})

<script src="https://vuejs.org/js/vue.min.js"></script>
<script …

我一直在用头撞墙试图弄清楚这一点。我在这里通过 Sortable.js 库 repo 找到了一个几乎完全符合我想要做的示例，但我无法使用Vue.Draggable实现它。

我的理论是添加一个与其余元素<draggable/>相同group的元素并侦听其@add上的事件，然后从其列表中删除该拖动的元素。

一个问题（可能）是我试图将“垃圾箱”按钮指定为删除区域，如果它引用相同的 draggable group，则该拖动的元素将附加到按钮组并抛出整个 UI。所以，一件非常重要的事情是有某种用户反馈（例如，当拖动元素悬停时垃圾桶图标变成红色），但被拖动的元素不应该被插入到按钮组中。

初始拖动状态

预期的删除操作

提前致谢！

我正在使用Sortable.js和Vue.js。目标是对项目进行排序并保持数据更新。

它在Vue 1.x上运行良好，但是在更新到2.0之后，排序变得不正确。数组仍然可以正确更新，但是DOM中的项目放置在错误的位置。

new Vue({
  el: '#app',
  template: '#sort',
  data: function() {
    return {
      items: [
        "http://placehold.it/200X300?text=image1",
        "http://placehold.it/200X300?text=image2",
        "http://placehold.it/200X300?text=image3",
        "http://placehold.it/200X300?text=image4"
      ],  
    }
  },
  mounted: function() {
    this.$nextTick(function () {
      Sortable.create(document.getElementById('sortable'), {
        animation: 200,
        onUpdate: this.reorder.bind(this),
      });
    })
  },
  methods: {
    reorder: function(event) {
        var oldIndex = event.oldIndex,
            newIndex = event.newIndex;
        this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);

    } 
   }
});

jsFiddle https://jsfiddle.net/4bvtofdd/4/

有人能帮我吗？