You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
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 truemirrorContainer: 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
The text was updated successfully, but these errors were encountered: