dragula

问题 I am creating a drag and drop page using Dragula. It works very well. But in my case, I need move the item to the end of the list. Always. This is my Javascript Code dragula([ document.getElementById('left'), document.getElementById('right') ]) .on('drag', function (el) { // add 'is-moving' class to element being dragged el.classList.add('is-moving'); console.log(el.classList); }) .on('dragend', function (el) { // remove 'is-moving' class from element after dragging has stopped el.classList

问题 I'm trying to implement a grid which you can drag 'n drap elements. I found dragula, which suits my needs exactly! The only thing is, I need the tiles to animate when they move out of the way to let in the one being dragged. (Hope that's clear. :)) I tried adding a transition: all 1s ease-out , but all that did, was animated the opacity. How can I animate the change of positions? JSFiddle dragula([document.getElementById('left-rm-spill')]); .container { background-color: lightgreen; display:

问题 I'm trying to implement a grid which you can drag 'n drap elements. I found dragula, which suits my needs exactly! The only thing is, I need the tiles to animate when they move out of the way to let in the one being dragged. (Hope that's clear. :)) I tried adding a transition: all 1s ease-out , but all that did, was animated the opacity. How can I animate the change of positions? JSFiddle dragula([document.getElementById('left-rm-spill')]); .container { background-color: lightgreen; display:

问题 Im using Dragula JS for the drag and drop functionality and I would like to also have the option to move back and forth the elements in my list with the mouse click without loosing the drag and drop functionality.. How can I achieve this? so I click on element 1 and it moves to the list. I click it back from that list and it moves back. That's the idea. I prepared a fiddle with the basic drag and drop if it helps. http://jsfiddle.net/vf6dnwxj/10/ my structure in the fiddle above: <div class=

问题 I would love to implement Drag and Drop in my Angular project using the angular-dragula module (https://github.com/bevacqua/angular-dragula). However, it seems to be heavily dependent on RequireJS. I've not used Require for a while and only then for an example app or two. Is there an easy way to untangle Require from this module? The author seems to think it is simple (https://github.com/bevacqua/angular-dragula/issues/23) and has shut down similar questions as well without a real explanation

问题 I use drag&drop via ng2-dragula. The drag&drop functionality is applied this way: <div class='container' [dragula]='"first-bag"'> <div>item 1</div> <div>item 2</div> </div> If I understand angular 2 properly, the way how [dragula]='"first-bag"' is attached to my div is called Attribute Directive in Angular 2. Now I have a variable in my component called enableDragNDrop:boolean . How can I use this variable to attach [dragula]='"first-bag"' to my div only when enableDragNDrop == true ? If

问题 I have some placeholder elements, which should not be used as drop location. Is there an option to disable some drop locations or to hide some drop locations? I know that you shouldn't do this Do not add any child elements that aren't meant to be draggable but isn't that, what accepts is for? this.dragulaService.createGroup('cards', { accepts: (el, target, source, sibling) => { if (sibling !== null && sibling.classList.contains('invisible')) return false; return true; } }); The issue is that

问题 I have a page which is similar to page builder template editor. Im using Dragula.JS as a plugin for drag and drop and used their method copy to copy elements from other container. This is what it looks like: The problem is when I drag from right side columns and put in the left box elements are copied exactly what it is on the right columns. This is my code: <div id="2col" class="collapse column-choices"> <a href="#" class="list-group-item"> <div class="row"> <div class="layoutBorder one-half

问题 i have an angular2 app with typescript . I am using ng2-dragula to make a drag and drop application. I am requiered to, check a condition, and revert the drag if the condition is false , and I know from here, that revertOnSpill that revertOnSpill:true can put the element back to its first place. But, I don't know how is it possible in ng2-dragula . i implimented it in the onDrop . here is the code constructor() { dragulaService.drop.subscribe((value) => { this.onDrop(value.slice(1)); });

问题 I have a Trello-like web app. with Task s that can be dragged & dropped in status boxes (To do, ogoing and done). I use ng2-dragula to achieve the drag & drop feature and wanted to implement a way to filter my tasks with an Angular 2 pipe. So I did, by first defining my pipe: @Pipe({ name: 'taskFilter', pure: false }) export class TaskFilterPipe implements PipeTransform { transform(items: Task[], filter: Task): Task[] { if (!items || !filter) { return items; } // pipes items array, items