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

Reactjs bridge of dragula: It is only getting applied onto parent container and not on child elements (unlike angular, dragula directive can be used in child elements) #678

Open
Minu-DEVELOPER opened this issue Apr 21, 2021 · 0 comments

Comments

@Minu-DEVELOPER
Copy link

Minu-DEVELOPER commented Apr 21, 2021

dragula library for reactjs is re-aligning elements, it is not exchanging element position for me.

For Example:

Parent Container has ref={this.dragulaDecorator}
Element A
Fixed-Non draggable Element B
Element C
Line break
Element D
Element E
Fixed-Non draggable Element F
Element G
Element H

If I have dragged Element D to Element A
New list formed is

Parent Container has ref={this.dragulaDecorator}
Element A
Element D
Fixed-Non draggable Element B
Element C
Line break
Element E
Fixed-Non draggable Element F
Element G
Element H

wherein what I expect is replacement or exchange of position

Parent Container has ref={this.dragulaDecorator}
Element D
Fixed-Non draggable Element B
Element C
Line break
Element A
Element E
Fixed-Non draggable Element F
Element G
Element H

Dragula options set:
{
isContainer: function (el) {
return false; // only elements in drake.containers will be taken into account
},
moves: function (el, source, handle, sibling) {
if (el.classList.contains("axleConfigBar")) {
return false;
}
return true; // elements are always draggable by default
},
accepts: function (el, target, source, sibling) {
return true; // elements can be dropped in any of the containers by default
},
invalid: function (el, handle) {
return false; // don't prevent any drags from initiating by default
},
direction: "vertical", // Y axis is considered when determining where an element would be dropped
copy: false, // elements are moved by default, not copied
copySortSource: false, // elements in copy-source containers can be reordered
revertOnSpill: false, // spilling will put the element back where it was dragged from, if this is true
removeOnSpill: false, // spilling will .remove the element, if this is true
mirrorContainer: document.body, // set the element that gets mirror elements appended
ignoreInputTextSelection: true, // allows users to select input text, see details below
slideFactorX: 0, // allows users to select the amount of movement on the X axis before it is considered a drag instead of a click
slideFactorY: 0,
};

Only problem I could understand is I'm not getting destination position in drake.on('drop') to realign-re-position my container. (unlike angular)
And in reactjs, it is only getting applied on parent container not to child elements.

Any help or suggestion to exchange element position using dragula?
[contrib]: https://github.com/bevacqua/dragula/blob/master/.github/contributing.markdown
[slack]: https://dragula.slack.com

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

1 participant