Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JET v2.2.0 viewModel and view rewritten from DragNDrop cookbook to work with Yeoman NavDrawer template
<div style="float:left;">
<fieldset style="border:1px #b0b0b0 solid; min-width:240px; min-height:450px;">
<legend style="border:1px #b0b0b0 solid; margin-left: 1em; padding:0.2em 0.8em">Drag Sources</legend>
<div>
<div id="dragdiv1" draggable="true" style="background:#f3a0bf; float:left; width:50px; height:30px; border:1px solid rgb(176,76,176); cursor:pointer; margin:15px 11px 10px; text-align:center; vertical-align:middle;line-height:30px;">Tools</div>
<div id="dragdiv2" draggable="true" style="background:#f3a0bf; float:left; width:50px; height:30px; border:1px solid rgb(176,76,176); cursor:pointer; margin:15px 11px 10px; text-align:center; vertical-align:middle;line-height:30px;">Apps</div>
<div id="dragdiv3" draggable="true" style="background:#f3a0bf; float:left; width:50px; height:30px; border:1px solid rgb(176,76,176); cursor:pointer; margin:15px 11px 10px; text-align:center; vertical-align:middle;line-height:30px;">Logs</div>
</div>
<div style="float:left;">
<div id="tree1" style="margin-top:20px; padding-top:10px;width:200px; height:320px; zmin-height:320px; zmargin-left:5px; overflow:auto"
data-bind="ojComponent:
{
component: 'ojTree',
selectionMode: 'multiple',
data:{data: getJson},
dnd: {
drag: {
node: {
dataTypes: ['application/ojtreenodes+json'],
dragEnd: dragEnd
}
}
}
}"/>
</div>
</fieldset>
</div>
<div style="float:left;margin-left:20px;">
<fieldset style="border:1px #b0b0b0 solid;">
<legend style="border:1px #b0b0b0 solid; margin-left: 1em; padding:0.2em 0.8em">Drop Target</legend>
<div id="tree2" style="padding-top:10px;width:200px; height:420px; overflow:auto;"
data-bind="ojComponent:
{
component: 'ojTree',
selectionMode: 'multiple',
data:{data: getJson},
dnd: {
drop: {
node: {
dataTypes: ['application/ojtreenodes+json',
'dragdiv/text'],
drop: drop
}
}
}
}"/>
</fieldset>
</div>
<div style="clear:both" ></div>
<p/>
/*
* Your dashboard ViewModel code goes here
*/
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojtree'],
function (oj, ko, $) {
function DashboardModel(id)
{
var self = this;
function treeModel(id)
{
self.id = id;
self.$tree = $("#" + id);
self.drop = function (event, ui)
{
var dt = event.originalEvent.dataTransfer;
var bNode = ($.inArray("application/ojtreenodes+json", dt.types) >= 0);
var bDiv = ($.inArray("dragdiv/text", dt.types) >= 0);
var id, data;
if (bNode) {
// Draggable tree node(s)
// We know we have tree node data because we used dataTypes in both the
// drag source tree and this drop target tree.
if (!ui.reorder) {
data = dt.getData("application/ojtreenodes+json");
data = JSON.parse(data);
self.$tree.ojTree("create", ui.reference, ui.position, data);
}
} else if (bDiv) {
// Draggable div is being dropped.
// We know we have div data because we used dataTypes in both the drag
// source and this drop target.
id = dt.getData("dragdiv/text");
self.$tree.ojTree("create", ui.reference, // add a simple node
ui.position, {
"title": id,
"attr": {"id": id}
});
}
return false; // drop accepted
};
self.dragEnd = function (event, ui)
{
var selections;
if (!ui.reorder) {
if (event.originalEvent.dataTransfer.dropEffect === "move") {
// Remove the moved nodes. If node is selected, remove
// all selected nodes.
if (self.$tree.ojTree("isSelected", event.target)) {
selections = self.$tree.ojTree("option", "selection");
for (i = 0; i < selections.length; i++) {
self.$tree.ojTree("remove", selections[i]);
}
} else {
// Single unselected node moved
self.$tree.ojTree("remove", event.target);
}
}
}
};
self.getJson = function (node, fn)
{
var data = (self.id === "tree1") ? getJson1() : getJson2();
fn(data);
};
}
; // end treeModel
//the jQuery DOMReady function won't run at appropriate time inside a viewModel
//so going to move the code into handleAttached and handleBindingsApplied
// $(function() {
//
// // see below for copy-pasted code into handleAttached and handleBindingsApplied
// });
self.handleAttached = function (info) {
var vmTree1 = new treeModel("tree1");
var vmTree2 = new treeModel("tree2");
// applyBindings is handled after oj.Router.sync() in main.js
// ko.applyBindings(vmTree1, document.getElementById('tree1'));
// ko.applyBindings(vmTree2, document.getElementById('tree2'));
};
self.handleBindingsApplied = function (info) {
for (var i = 1; i <= 3; i++)
{
var div = document.getElementById("dragdiv" + i);
div.addEventListener("dragstart", dragDivStart, false);
div.addEventListener("dragend", dragDivEnd, false);
}
};
function dragDivStart(ev)
{
console.log('dragDivStart');
var id = ev.currentTarget.id;
ev.dataTransfer.setData("dragdiv/text", ev.currentTarget.textContent);
ev.dataTransfer.effectAllowed = (ev.ctrlKey ? "copy" : "move");
}
;
function dragDivEnd(ev)
{
console.log('dragDivEnd');
var div;
var de = ev.dataTransfer.dropEffect;
if (de == "move") {
div = document.getElementById(ev.currentTarget.id);
div.parentNode.removeChild(div);
}
}
;
// Demonstration data for Tree1
function getJson1()
{
return [
{
"title": "Home",
"attr": {"id": "home"}
},
{
"title": "News",
"attr": {"id": "news"}
},
{
"title": "Blogs",
"attr": {"id": "blogs"},
"children": [{"title": "Today",
"attr": {"id": "today"}
},
{"title": "Yesterday",
"attr": {"id": "yesterday"}
},
{"title": "2 Days Back",
"attr": {"id": "2daysback"}
},
{"title": "Archive",
"attr": {"id": "archive"}
}
]
},
{
"title": "Links",
"attr": {"id": "links"},
"children": [{"title": "Oracle",
"attr": {"id": "oracle"}
},
{"title": "IBM",
"attr": {"id": "ibm"}
},
{"title": "Microsoft",
"attr": {"id": "ms"},
"children": [{"title": "USA",
"attr": {"id": "msusa"},
"children": [{"title": "North",
"attr": {"id": "msusanorth"}
},
{"title": "South",
"attr": {"id": "msusasouth"}
},
{"title": "East",
"attr": {"id": "msusaeast"}
},
{"title": "West",
"attr": {"id": "msusawest"}
}
]
},
{"title": "Europe",
"attr": {"id": "msuerope"}
},
{"title": "Asia",
"attr": {"id": "msasia"},
"children": [{"title": "Japan",
"attr": {"id": "asiajap"}
},
{"title": "China",
"attr": {"id": "asiachina"}
},
{"title": "India",
"attr": {"id": "asiaindia"}
}
]
}
]
}
]
},
{
"title": "Sponsors",
"attr": {"id": "sponsors"}
},
{
"title": "References",
"attr": {"id": "references"},
"children": [{"title": "All",
"attr": {"id": "refsall"}
},
{"title": "USA",
"attr": {"id": "refsusa"}
},
{"title": "Europe",
"attr": {"id": "refseurope"}
},
{"title": "Asia",
"attr": {"id": "refsasia"}
}
]
}
];
}
;
// Demonstration data for Tree2
function getJson2()
{
return [
{
"title": "Companies",
"attr": {"id": "companies"},
"children": [
{
"title": "Corporate",
"attr": {"id": "corporate"}
},
{
"title": "Subsidiaries",
"attr": {"id": "subsids"}
},
{
"title": "External",
"attr": {"id": "external"}
}
]
},
{
"title": "Divisions",
"attr": {"id": "divs"},
"children": [
{
"title": "Financial",
"attr": {"id": "finance"}
},
{
"title": "Marketing",
"attr": {"id": "marketing"}
},
{
"title": "Sales",
"attr": {"id": "sales"}
},
{
"title": "Production",
"attr": {"id": "production"}
}
]
},
{
"title": "Legal",
"attr": {"id": "legal"}
},
{
"title": "Public Relations",
"attr": {"id": "pr"}
},
{
"title": "Investor Relations",
"attr": {"id": "invest"}
}
];
}
;
}
; // end DashboardModel
return new DashboardModel();
}
);
self.$tree.ojTree("remove", selections[i]);
}
} else {
// Single unselected node moved
self.$tree.ojTree("remove", event.target);
}
}
}
};
self.getJson = function (node, fn)
{
var data = (self.id === "tree1") ? getJson1() : getJson2();
fn(data);
};
}
; // end treeModel
//the jQuery DOMReady function won't run at appropriate time inside a viewModel
//so going to move the code into handleAttached and handleBindingsApplied
// $(function() {
//
// // see below for copy-pasted code into handleAttached and handleBindingsApplied
// });
self.handleAttached = function (info) {
var vmTree1 = new treeModel("tree1");
var vmTree2 = new treeModel("tree2");
// applyBindings is handled after oj.Router.sync() in main.js
// ko.applyBindings(vmTree1, document.getElementById('tree1'));
// ko.applyBindings(vmTree2, document.getElementById('tree2'));
};
self.handleBindingsApplied = function (info) {
for (var i = 1; i <= 3; i++)
{
var div = document.getElementById("dragdiv" + i);
div.addEventListener("dragstart", dragDivStart, false);
div.addEventListener("dragend", dragDivEnd, false);
}
};
function dragDivStart(ev)
{
console.log('dragDivStart');
var id = ev.currentTarget.id;
ev.dataTransfer.setData("dragdiv/text", ev.currentTarget.textContent);
ev.dataTransfer.effectAllowed = (ev.ctrlKey ? "copy" : "move");
}
;
function dragDivEnd(ev)
{
console.log('dragDivEnd');
var div;
var de = ev.dataTransfer.dropEffect;
if (de == "move") {
div = document.getElementById(ev.currentTarget.id);
div.parentNode.removeChild(div);
}
}
;
// Demonstration data for Tree1
function getJson1()
{
return [
{
"title": "Home",
"attr": {"id": "home"}
},
{
"title": "News",
"attr": {"id": "news"}
},
{
"title": "Blogs",
"attr": {"id": "blogs"},
"children": [{"title": "Today",
"attr": {"id": "today"}
},
{"title": "Yesterday",
"attr": {"id": "yesterday"}
},
{"title": "2 Days Back",
"attr": {"id": "2daysback"}
},
{"title": "Archive",
"attr": {"id": "archive"}
}
]
},
{
"title": "Links",
"attr": {"id": "links"},
"children": [{"title": "Oracle",
"attr": {"id": "oracle"}
},
{"title": "IBM",
"attr": {"id": "ibm"}
},
{"title": "Microsoft",
"attr": {"id": "ms"},
"children": [{"title": "USA",
"attr": {"id": "msusa"},
"children": [{"title": "North",
"attr": {"id": "msusanorth"}
},
{"title": "South",
"attr": {"id": "msusasouth"}
},
{"title": "East",
"attr": {"id": "msusaeast"}
},
{"title": "West",
"attr": {"id": "msusawest"}
}
]
},
{"title": "Europe",
"attr": {"id": "msuerope"}
},
{"title": "Asia",
"attr": {"id": "msasia"},
"children": [{"title": "Japan",
"attr": {"id": "asiajap"}
},
{"title": "China",
"attr": {"id": "asiachina"}
},
{"title": "India",
"attr": {"id": "asiaindia"}
}
]
}
]
}
]
},
{
"title": "Sponsors",
"attr": {"id": "sponsors"}
},
{
"title": "References",
"attr": {"id": "references"},
"children": [{"title": "All",
"attr": {"id": "refsall"}
},
{"title": "USA",
"attr": {"id": "refsusa"}
},
{"title": "Europe",
"attr": {"id": "refseurope"}
},
{"title": "Asia",
"attr": {"id": "refsasia"}
}
]
}
];
}
;
// Demonstration data for Tree2
function getJson2()
{
return [
{
"title": "Companies",
"attr": {"id": "companies"},
"children": [
{
"title": "Corporate",
"attr": {"id": "corporate"}
},
{
"title": "Subsidiaries",
"attr": {"id": "subsids"}
},
{
"title": "External",
"attr": {"id": "external"}
}
]
},
{
"title": "Divisions",
"attr": {"id": "divs"},
"children": [
{
"title": "Financial",
"attr": {"id": "finance"}
},
{
"title": "Marketing",
"attr": {"id": "marketing"}
},
{
"title": "Sales",
"attr": {"id": "sales"}
},
{
"title": "Production",
"attr": {"id": "production"}
}
]
},
{
"title": "Legal",
"attr": {"id": "legal"}
},
{
"title": "Public Relations",
"attr": {"id": "pr"}
},
{
"title": "Investor Relations",
"attr": {"id": "invest"}
}
];
}
;
}
; // end DashboardModel
return new DashboardModel();
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
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.