Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Suggestion: delegation for draggables, and targets. #241

Closed
hollowdoor opened this issue Oct 24, 2015 · 8 comments
Closed

Suggestion: delegation for draggables, and targets. #241

hollowdoor opened this issue Oct 24, 2015 · 8 comments

Comments

@hollowdoor
Copy link

There is a problem for when there could be potentially 100s of elements, but those elements are not direct children of a container.

These are potentially related issues:

Making it work with simple HTML tables for column resize
Option to drop an item on top of an existing one

To do this maybe a field in the options would work specifying classes to target.

var drake = dragula(document.getElementById(id), {
    drag: ['dragOne', 'dragTwo'],
    targets: ['dragOne', 'otherTarget']
});

Then if any elements are added anywhere in the page it just has to have the classes set in the drag, or target fields. This would pose another problem though. What about the easy functionality that dragula uses already by just passing a container:

var drake = dragula(document.getElementById(id), {
    drag: ['dragOne', 'dragTwo'],
    targets: ['dragOne', 'otherTarget'],
    direct: false /* direct children are not moved */
});

The direct option would be default true, and disable direct children dragging. If direct is true, and there is a sub-child that is set to drag then it will drag and it's parent will not unless the parent is large enough, and its box is hit by the cursor first.

Alternatively another method is a delegate on('drag', '.delegateSelector').

This functionality might add unwanted complexity to the already very nice dragula, but it's just a suggestion. I'm working on a project that will potentially have 1000s of elements that may, or may not be moveable based on some condition. I suppose the other option is just setting draggable false, but that wouldn't be as flexible.

I understand that some delegation can be done by checking the classList. I just wanted to see if there was some other way to have the delegation effect. There might be a better way that I haven't thought of too.

@bevacqua
Copy link
Owner

I don't understand the question. Do you want to be able to dynamically select containers? isContainer does that. Do you want to have append behavior instead of positioning stuff near the mouse cursor?

@hollowdoor
Copy link
Author

I want drag, and drop events to go to specified children instead of just the immediate children. Kind of like delegate events that are used in a lot of DOM libs.

It's more of a feature request.

@bevacqua
Copy link
Owner

You can use the handle in moves, but if you're worried about performance there is just a single listener, not one per item

@hollowdoor
Copy link
Author

A handle probably wouldn't work. Isn't that for an element that drags it's parent? I'm thinking of a regular drag on an element, but an element that's possibly not directly a descendent of the container. Same thing for targets.

How I've been doing it is setting the drag/drop listeners with addEventListener on one element full of children with draggable set. Then I use classList.contains on event.target to see if it has a class from a set of classes I've set to allow to drag. Some are nested, but some parents move with their children, and their children also move independently of those parents depending on if they are the target with an allowed class.

This is really hard for me to explain. Sorry. :)

@hollowdoor
Copy link
Author

I'd like to say not having this functionality is not a deal breaker. What dragula does will fit most situations. I might just have to do a little work outside of dragula for special situations.

@hollowdoor
Copy link
Author

I think the functionality of dragula is pretty well defined. It might not be a good idea to add too much to a simple interface that already does a lot. This was a hasty idea.

@markudevelop
Copy link

@hollowdoor dragula is not very flexible to modify I wish it could provide more control on where the shadow is being shown or to drag and drop on specific elements and to switch them if needed, the plugin is really limited. Just single sortable functionality.

@hollowdoor
Copy link
Author

Well it does allow arbitrary targets with the isContainer method, but I agree it is not flexible. I'm thinking this is a good thing.

I'm not sure if control of the shadow is really all that good of an idea. Where would you put it?

Switching does seem like a valid problem. Though I don't know where that would be used. What kind of situation is that a problem to be solved?

Are either of your problems related to delegation as in this particular issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants