This question will be bountied as soon as I can, so a big rep reward coming to someone!
EDIT: One more layer to this issue I noticed, The lowest level children when I try to drag it somewhere else it doesn't work, acts like it will but goes back where it was (i.e it's children are empty). But when I drag the parent of a child somewhere else it does one of the following:
Moves the parent and it's parent somewhere else where I drag it, but leaves the child where it was i.e
Initial state on a refresh
After I drag col-2 to container-1
or
Moves the child into the container where I dragged the parent to but leaves the parent where it was i.e
Initial state on a refresh
After dragging col-2 into col-1
Original Post
Hey guys, been building a landing page builder and decided vue-draggable would be a nice addition. That said after 3 days of headaches trying to make this work I'm at a loss. So far I've followed the nested example guide which has been KINDA working, in addition, I followed an issue about the nested guide on here adding an emitter to the children for proper updates. Now my getters and setters are firing BUT I'm still having a problem dragging elements(see the video)
http://www.giphy.com/gifs/ZMiyi8LEcI73nye1ZN
As you can see when I drag stuff around it's strange behavior:
Example cases:
When I drag col 2 label into col 1 it moves the children inside into
col one, does not change col 2s place
When I drag paragraph label
anywhere it will not move, shows like it will but when I release
nothing happens
If I drag row 1 from the original starting state you
saw in the gif into the paragraph I end up with the following:
Just 3 sample cases, references:
https://sortablejs.github.io/Vue.Draggable/#/nested-with-vmodel
https://github.com/SortableJS/Vue.Draggable/issues/701#issuecomment-686187071
my code creating these results:
component-renderer.vue (THERE'S A NOTE IN HERE TO READ)
<draggable
v-bind="dragOptions"
:list="list"
:value="value"
style="position: relative; border: 1px solid red"
:tag="data.tagName"
:class="data.attributes.class + ` border border-danger p-3`"
#input="emitter"
#change="onChange" //NOTE: I've tried setting the group here to row instead of in the computed prop below, didn't work
>
<slot></slot>
<component-renderer
v-for="el in realValue"
:key="el.attributes.id"
:list="el.children"
:data="el"
:child="true"
#change="onChange"
>
<span style="position: absolute; top: 0; left: 0; background: red">{{
`${el.tagName} - ${el.attributes.id}`
}}</span>
{{ el.textNode }}
</component-renderer>
</draggable>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "ComponentRenderer",
components: {
draggable,
},
props: {
data: {
required: false,
type: Object,
default: null,
},
value: {
required: false,
type: Array,
default: null,
},
list: {
required: false,
type: Array,
default: null,
},
child: {
type: Boolean,
default: false,
required: false,
},
},
computed: {
dragOptions() {
return {
animation: 0,
disabled: false,
ghostClass: "row",
group: "row",
};
},
realValue() {
return this.value ? this.value : this.list;
},
},
methods: {
emitter(value) {
this.$emit("input", value);
},
onChange: function () {
if (this.child === true) {
this.$emit("change");
} else {
this.emitter(this.value);
}
},
},
};
</script>
<style scoped></style>
PageEditor.vue:
<div id="wysiwyg-page-editor">
<ChargeOverNavBar />
<div class="editor">
<ComponentRenderer v-model="elements" :data="elements[0]" />
</div>
<ChargeOverFooter />
</div>
</template>
<script>
import ChargeOverNavBar from "#/components/ChargeOverNavBar";
import ChargeOverFooter from "#/components/ChargeOverFooter";
import InlineEditor from "#ckeditor/ckeditor5-build-inline";
import ComponentRenderer from "#/components/module-editor/ComponentRenderer";
export default {
name: "PageEditor",
components: {
ComponentRenderer,
ChargeOverFooter,
ChargeOverNavBar,
},
data() {
return {
editor: InlineEditor,
editorConfig: {},
activeSection: null,
page: {},
panels: {
pageProperties: true,
seoProperties: true,
sectionProperties: false,
},
};
},
computed: {
elements: {
get() {
console.log("getter");
return JSON.parse(JSON.stringify(this.$store.state.editor.editorData));
},
set(value) {
console.log("setter");
this.$store.dispatch("setEditor", value);
},
},
},
};
</script>
<style lang="scss" scoped>
#use "../assets/scss/components/PageEditor";
</style>
editor.js(store module):
state: {
editorData: [],
editorLoading: false,
},
mutations: {
SAVE_EDITOR(state, data) {
state.editorData = data;
},
TOGGLE_EDITOR_LOAD(state, busy) {
state.editorLoading = busy;
},
},
actions: {
setEditor({ commit }, data) {
commit("SAVE_EDITOR", data);
},
loadEditor({ commit }) {
commit("TOGGLE_EDITOR_LOAD", true);
//TODO: Change me to read API DATA
let fakeData = [
{
tagName: "section",
attributes: {
id: "section-1",
class: "test",
},
children: [
{
tagName: "div",
attributes: {
id: "container-1",
class: "container",
},
children: [
{
tagName: "div",
attributes: {
id: "row-1",
class: "row",
},
children: [
{
tagName: "div",
attributes: {
id: "col-1",
class: "col",
},
children: [],
},
{
tagName: "div",
attributes: {
id: "col-2",
class: "col",
},
children: [
{
tagName: "p",
attributes: {
id: "p-1",
class: "p",
},
textNode: "This is my paragraph",
children: [],
},
],
},
],
},
],
},
],
},
];
commit("SAVE_EDITOR", fakeData);
commit("TOGGLE_EDITOR_LOAD", false);
},
},
getters: {
getEditorData: (state) => state.editorData,
getEditorLoading: (state) => state.editorLoading,
},
};
It seems only dragging labels works for moving stuff around but not like i'd expect. I think this makes sense but why can't I drag the body anywhere? It's not slotted in header or footer and the docs says that's the onlytime it wouldn't be? Can I not use as the tag itself and drag it?
As I'm sure all of you can deduce the behavior I'm expecting, anything should be draggable into any section(in the future I want this to change so only cols can be dragged into rows, rows can only be dragged into sections etc(but for now I'm not sure how to do this so we start at the beginning :D)).
Also yes I know those components are kinda messy atm, until I fix this I'm not cleaning them up as I keep drastically changing the contents of these files trying to make it work, sorry it's hacky atm!
Any help or ideas would be amazing!
Thanks guys!
I have a grid editor with toolbar. There are two event handlers, one for grid's store (update event) and one for button on grid tool bar.
When I edit grid cell and update contents and click the button on toolbar without tabbing out, grid store's 'update' event is getting triggered and not the button handler. Is there any way to trigger both events?
Here is the code.
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
// destroy the store if the grid is destroyed
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
// load remote data using HTTP
url: 'plants.xml',
// specify a XmlReader (coincides with the XML format of the returned data)
reader: {
type: 'xml',
// records will have a 'plant' tag
record: 'plant'
}
},
sorters: [{
property: 'common',
direction:'ASC'
}],
listeners:{
'update':function(){
//Do something related to this store data.
}
}
});
// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}],
selModel: {
selType: 'rowmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text:'Test event',
handler:function(){
//Handle button click.
}
}
]
});
Sha Ken, this code is part of the framework examples. I reproduce the scenario and both events are being triggered. Perhaps you are seeing/debuggin one event only.
I am working in extjs4. I have collapsible panel as=
xtype: 'panel',
autoHeight : true,
border: false,
itemId : 'dashmetrics',
frame: false,
cls : 'matrix-tab-panel-container',
bodyCls : 'matrix-tab-panel-container-body',
layout: 'form',
title : 'Panel1'
collapsible : true,
titleCollapse : true,
padding:'3px 0 3px 0',
stateful: true,
getState: function() {
return {
collapsed: this.collapsed
};
},
applyState : function(state){
if(state){
Ext.apply(this, state);
}
},
stateEvents: ['collapse', 'expand']
i want to maintain state of this expand and collapse. I tried as above, But is getState() is always returning false. So how to maintain panel's collapse and expand state in extjs4?
I was using ExtJS 3.2 and to make the tree panel work I have taken reference from below link and was able to get that done.
https://www.assembla.com/code/yamt/subversion/nodes/trunk/web/js/extjs/examples/ux/XmlTreeLoader.js?rev=9
Now I have to migrate that code in ExtJS 4.1, where I am geeting errors for this code, because Ext.tree.TreeLoader is not working there. So what would be the minimal changes in the same code to make the things work in ExtJS 4.1.
Try the following code.This code is taken from Sencha API.
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});
Refer API for more details.
Code in controller
nextPages:function()
{
var obj=Ext.getCmp('centerId');
obj.removeAll();//remove center panel to display new panel information
var myTree=Ext.getCmp('leftId');//get tree panel view
var node=myTree.getRootNode().findChild("navTree","localId",true);//for get child node
if(node){
var obj2=Ext.create('AS.view.center.Localadmin');
obj2.region='center';
obj.add(obj2);
}
Code in view:
Ext.define('AS.view.left.Left',{
extend:'Ext.tree.Panel',
alias:'widget.Left',
id:'leftId',
useArrows : true,
hideHeaders : true,
//title: 'About village',
height: 150,
root: {
itemId:'navTree',
rootVisible : false,
text:'About village',
children:[{
text:'Whats nearby?',
expanded: true,
children: [{
// id:'first',
id:'localId',
text: 'Local Administration',
leaf: true
}, {
id:'bId',
text: 'Bussiness directory',
leaf: true
},{
id:'hid',
text: 'Heritage and tourism',
leaf: true
},{
id:'eid',
text: 'Education',
leaf: true
}],
},
{
text:'classifieds',
leaf: true
},{
text:'Events',
leaf: true
}],//children1
},//root
});
I want to get the specific child node for click event and after display another panel on that click of node. Tell me how to get the child node from tree panel.
In controller I wrote a function to get the child node and then get the view on that click of specific node.