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
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?
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
containersby 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.removethe 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?