bevacqua / dragula Goto Github PK

in my use case, i'll be adding containers dynamically to the page, making them part of dragula containers. therefore those will have dynamically created ids.
it would be ideal to be able to pass the id to the drake.addContainer method (addContainer("left2")
I've also tried passing the dom object through jquery, such as addContainer($("#left2")), but i'm getting an error when doing so.
only addContainer(left2) seems to work

I was wondering, is it possible to remove and add the containers dynamically currently?
Because it happens in our use cases a lot that we drop or add a container depending on the situation at hand.

If not: as I was looking at the code. I think it can be either done by having an update function in the api that checks if the containers variable which was passed has changed and adds and removes the elements accordingly. Or just have an add and remove function added to the api.

Hi, this is a super bit of code.

Is it possible to have items of different sizes which can flow left to right across the page? Something like jumbled up words that can be re-arranged in their proper order?

Phil Bolt

Sorry for bothering you again.
I edited your first demo example so that the right container is inside the left one. The drag and drop function works perfectly but the container won't be dragged. The container moves up if I'm dropping items below it but it won't come down again since I can't drag it. Do I have to edit something or maybe this will be in the future release?
I don't have any advance experience in Javascript so I don't really know how your code works.
Thanks for the answer.

Could you add examples on how to use the drake events, i'm thinking for instance at running a function at every time an element is dropped, but couldn't figure out how to do it properly.
This would really help.
Thx in advance

I have troubles to use your demo on a Windows Phone. It seems default behaviour (e.g. scrolling) of touch events isn't blocked correctly. That makes it unusable.

drake.addContainer(container) and drake.removeContainer(container) don't seem to be working.
http://codepen.io/ha-D/pen/aOoqVy

Thanks for the great library

let's say i initiate dragula with 2 containers such as
dragula([left, right], { removeOnSpill: true })
if i move an element from left to right, it would disappear.

I feel like it should be allowed to be moved as long as the element is dropped on one of the dragula containers.
How to achieve such behavior?

Greetings from Transylvania! 👏 🌟
Nice project keep up the good work! 🎆

I need the user drag options from white zone to the black (down), I added on the drop event the necessary thing to prevent the user drop from black to white because is not allowed but when i move from right to left in black zone it copies and i need to stop the copy.

I have the following code :

        $(function(){
            dragula([left1, right1,top1],{
                removeOnSpill: true,
                copy:true,
            }).on('drop', function (el, target, source) {

                if(source == left1 && target == top1){
                    alertify.error("Sie können keine Optionen hinzufügen");
                    el.remove();
                    return false;
                }

                if(source == right1 && target == top1){
                    alertify.error("Sie können keine Optionen hinzufügen");
                    el.remove();
                    return false;
                }

                if(source == left1 && target == right1){
                    // I need to remove the origin element from here
                    // removeOriginElement();
                }
            });
        });    

I would really appreciate your help with this, do i need to handle accepts method ?, how ?
And finally , i have the removeOnSpill set to true, and is not working.

Excelent library 👍 and very useful, thanks.

Something I noticed when trying out the samples on Firefox 39.0a2: http://imgur.com/8YPS2OP
When you drag the second example, the dragged items stay near the previous example. On the screen cap you can't see the mouse cursor, but it is down on the second box.

Tested on IE 11.0.96 and happens the same.

What do you think about differentiating between drag and click events by introducing a minHold duration option or something similar?

dragula.js line 47, character 7

You use isArray function, but this function supports from IE9.. Array.isArray()

So without polyfills your library don't work in IE less than 9.. And in Readme no info about this issue

I have two Backbone views that are rendering in different placeholders at different time and I want to drag element from one view and drop it into another. Is it possible to do?

Why does this not have a logo and more specifically, why is the logo not Dracula in drag.

https://orwhatyouwill.files.wordpress.com/2010/12/tim-curry-as-frank-n-furter.jpg

It let's me move it so I'm confused. It makes it sound like it should remain in its place in the element, even if I try to drag it to another box.

Poorly worded or not functioning?

Chrome 41 in case that matters.

Anytime I try to specify a container id with a dash in it (i.e. left-container) for the initial dragula call I get an error. So:

dragula([leftcontainer,rightcontainer]) will work but
dragula([left-container,right-container]) won't

Specifying containers currently seems to take advantage of the automatically defined properties on the Window object - it would be helpful if we could also specify any id so long as it's valid according to the spec.

Very nice lib, but, I'm trying to use it in a rails project, and I'm getting some problems:

1. I couldn't get how to install it manually, it depends from some libs and this is not very well documented;
2. I couldn't use rails-assets for it, because the name of it on bower have the dot char, which is an invalid name for a ruby gem. This could be handled on rails-assets gem generator of course, but I don't really know which are the best practices for naming for bower packages.

So, if you could just explain which libs you depend from, to some other people that want to install it manually, it would be very helpful. The second point is optional, but IMHO it would be better a name without dot (PS: why not just 'dragula', since this package name is not in use on bower yet)

Hi, thanks for the great lib. I'm creating dynamically a div container with div's inside that I want to drag, but I also want to be able to click on each div to trigger some code. However when I use dragula on my container, it hides the click event, unless I do a CMD + click (on mac). I want to get the click event without user having to press additional keys... Any suggestion? Thank you.

This might be a stupid question, but I'm looking at your example code and I can't figure out where you defined the containers (left, right, single, etc)?

I don't know if this is the expected result when a container runs out of icons but I think it should be possible to move items back even after emptying one of the containers. I may be able to help if you need, but I would like to know if this is what you really want before making any changes to the code.

PS.: Great work!

Ok, I am loading in the head, but what is crossvent.js?

I can't even find it on my system, but dragula is dying there in "function addEventEasy"

Color me confused...

I've just discovered this library today, and i really like it.
A couple of issues i'm encountering though, first with the use of a font-awesome styled , either within a span or not, this won't take it as the handle.
it will work ok with an empty span for instance, but as soon as i set the tag inside the span, it stops working.
same thing with the tag also holding the handle class

i gonna add pr with gulpfile with the following tasks:

1. Minification
2. Adding banner (info in top of dist files about plugin, author and repo)
3. Much module systems in dist? (es6, amd, jquery plugin). i offer to rewrite general library to globals format and then to build for different module systems.

may I send such a pr?

One night, I'm searching for the latest jquery drag and drop feature and got this from google search. Reading down the readme and then the scare jump appears! Then I decided to check it on day only.

After some testing I realize that it's needed to be an id to be a container. Can we just use class for it so then the container will be more dynamic (I mean add new container or even container inside container)? Or are there workaround for this?

Could be a nice feature to allow for dragging between containers that could also be iframes. Either left or right could be an iframe or both :)

How hard would it be to fork the code and change it to be class based instead of ID based?

That one could use a definite review!

Great work.

When i start dragging an element they are no mirror element that follow the mouse.

My element is just a simple img in a span :

When I re-order any element of the 3rd demo ( removeOnSpill ), on Safari 8 and Chrome, the element is removed.
It's correctly re-ordered on desktop Chrome.

( iPhone 6, iOS 8.1.2 ).

The project is impressive tho ; )

Can I select some items and then drag and drop selected items(multiple)?

Awesome tool! It's way more intuitive/light than anything else I've tried.

I'm running into a problem, though, that I can't figure out, and seems to be throwing a warning.

I have two containers. I want to be able to copy items from the right to the left, and move them around the left, but not copy from the left to the right.

I tried the following (in Angular, so s is a essentially global object):

var stopDrop;

s.drakeLeftRight = dragula([left, right], {
  revertOnSpill: true,
  copy: true
});

s.drakeLeft = dragula([left], {
  removeOnSpill: true
});

stopDrop = function(container) {
  if (!_.contains(container.classList, 'left')) {
    return s.drakeLeftRight.cancel();
  }
};

s.drakeLeftRight.on('drop', function(el, container, source) {
  return setTimeout((function() {
    return stopDrop(container);
  }), 0);
});

The hope was that the s.drakeLeftRight.cancel() would "cancel" the drop of the item from the left list if it wasn't dropped into the right.

It also throws this in the console:

Uncaught TypeError: Cannot read property 'className' of null

But the actual behavior is currently that the item transfers (not copies) from the left to the right, disappearing from the left. I've also tried giving cancel an argument of the container into which it's being dropped (thinking, partially because of the above error, that the revert argument might refer to the container from which the item should be cancelled).

No dice. Similarly no dice if I use remove(), which takes the item out from both sides.

Any idea how to do this?

When I try to drag an element after I have scrolled down any amount, the copy element being dragged is incorrectly positioned.
Screenshots attached
Latest version of FireFox
Tested on Chrome with no issue

Before scrolling

After scrolling

I was playing around with the demo and noticed that setting revertOnSpill to true results in a misleading shadow position. By this I mean that if you move the item down the list so that its shadow goes from, say, the first to the third position, moving the item out of the box leaves the shadow in the third position. This would seem to indicate to a user that letting go would snap it to the third position, when it would really return to the first.

Steps to reproduce, for clarity:

1. Grab item
2. Drag so that shadow indicates new position
3. Move item outside of drop-friendly zone
4. Note how shadow does not revert to original position

The main issue with this is that a user can't tell the difference between a box where revertOnSpill == true and one where revertOnSpill == false without making a mistake with their drag. There's a chance that it actually moves to the indicated area, but there's also a chance that it returns to the original position -- that's a confusing and potentially harmful experience. Consider the case where a user drags a document over a trash icon, then changes their mind. They attempt to cancel the drag by moving the mouse outside the drop zone, but the item is deleted anyway -- they assumed revertOnSpill was true, when it was actually false.

Hi there!

Thank you so much for Dragula! It's pretty awesome and works as promised out of the box. I just have one little issue. While dragging the width of the object isn't kept the same. Before dragging it looks like this:

While dragging it looks like this:

And after dropping it looks just as it should be.

Do you have any idea what the problem could be? If you need a codepen I can probably fix that! ;)
Thanks in advance!

The drag work but there is no drop and no interaction with containers.

This is cause by setting .gu-mirror position absolute but if i don't set position absolute the mirror is not following my cursor and is just stick in the bottom left corner.

Codepen : http://codepen.io/anon/pen/yNBVqa

Is it possible to drag all the child elements inside a div ?

I followed the pattern he showed in the gif but it didn't work in google chrome

I believe this line https://github.com/bevacqua/dragula/blob/master/dragula.js#L257 prevents moving (reordering) items within the source container, when copy is true.

I think it should be possible to still reorder items within the same container.

I need to be able to go into drag mode, and then turn it off.

Is there a way to do that?

The only way I think it could be done is to keep a Drake object around and add/remove containers, is that the way?

Are there any plans to support hierarchical lists?

It seems when loading dragula in <head>, the local body variable is null, which causes all kinds of problems. It seems this is due to document.body being null at the time body is defined: https://github.com/bevacqua/dragula/blob/master/dragula.js#L5

To state the obvious -- I know the ideal solution here is "don't put your scripts in <head>", but unfortunately I have a very large codebase that does exactly the opposite 😑... Maybe dragula could support this? I'd be happy to attempt a PR if you're amenable to it.

Here's a demo showing the problem: http://ryanfunduk.com/dragula-test.html
Same page but loading at EOB: http://ryanfunduk.com/dragula-works.html

Thanks for dragula, btw! It's looking like the drag&drop lib of my dreams :)

Would love for there to be tests..

Here's a use case: IvyApp/ivy-sortable#3 (comment)

I have seen you have set up a GitHub Page. If you are interested in the custom domain dragula.js.org for free you should have a look at JS.ORG. I would appreciate your request.

It would be great if one could specify a css selector for drag handles.

Is it possible to pass class instead of id to target an element ? Something like:

dragula([.left1, .right1]); ??

One more thing, how can i know where dragged element is dropped? Can i see exact tag that element was dropped IN?

Thanks in advance.

I just can't figure it out what is the best way to call an ajax api to save the new order... any hint?

When using dragula to drag and drop react element's an error is throw because cloning elements will end up having two elements with same data-reactid attribute.

This is what the log says:

Uncaught Error: Invariant Violation: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .0.0.0.1:$0.0.4.1.0.0.3.0

It would be awesome if you could make this nestable. http://dbushell.github.io/Nestable/