Getting Started
Customization
Server Side Integration
Base
Forms
Editors
TinyMCE
Charts
Flotcharts
Google Charts
General
DataTables
Draggable
jKanban Board
Vis-Timeline
Icons
Documentation v8.0.25
- General
- jsTree
- Drag & Drop
Overview
Introduction & Getting Started
Gulp
Automate & enhance your build workflow
Webpack
Module bundler for build process automation
Multi-demo
Multi-demo concept & usage
File Structure
Theme File Structure Organization
SASS
SASS Structure & Customization
Javacript
Javacript Structure & Customization
Dark Mode
Dark Mode Setup for Layout & Components
Illustrations
Vector Illustrations
Illustrations
Youtube video tutorials
RTL Version
Theme & Bootstrap RTL Version Setup
Blazor
Bootstrap Blazor Server Side Integration
Laravel
Bootstrap Laravel Server Side Integration
Changelog
Versions & Updates Information
Updates
General Update Guidelines
References
3rd-party Libraries & Resources
Utilities
Extended Bootstrap Utilities
Flex Layouts
Custom Bootstrap Flex Layouts
Text
Extended Bootstrap Text Utilities
Background
Extended Bootstrap Background Utilities
Borders
Extended Bootstrap Border Utilities
Opacity
Extended Bootstrap Opacity Utilities
Forms
Extended Bootstrap Form Controls
Buttons
Extended Bootstrap Buttons
Indicator
Custom Bootstrap Indicator Component
Rotate
Custom Bootstrap Rotate Component
Tables
Extended Bootstrap Tables and DataTable
Cards
Extended Bootstrap Cards
Symbol
Custom Bootstrap Symbol Component For Avatars and Images
Badges
Custom Bootstrap Badge Component
Pulse
Custom Bootstrap Pulse Component
Bullets
Custom Bootstrap Bullet Component
Accordion
Extended Bootstrap Accordion
Carousel
Extended Bootstrap Carousel
Bootstrap Overlay
Custom Bootstrap Overlay Component
Separator
Custom Bootstrap Separator Component
Tabs
Extended Bootstrap Tabs
Breadcrumb
Customized Bootstrap Breadcrumb
Modal
Customized Bootstrap Modals
Tooltips
Extended Bootstrap Tooltips
Popovers
Extended Bootstrap Popovers
Pagination
Extended Bootstrap Pagination
Rating
Custom Bootstrap Rating Component
Ribbon
Custom Bootstrap Ribbon Component
Alerts
Customized Bootstrap Alerts
Autosize Textarea
Autosize Textarea Javascript Plugin
Select2
Select2 and Bootstrap Integration
Clipboard
Clipboard.js and Bootstrap integration
Flatpickr
Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker
FormValidation Overview
FormValidation and Bootstrap Integration
Basic Example
FormValidation Basic Examples
Advanced Example
FormValidation Advanced Examples
Date Range Picker
Bootstrap Datepicker & Timepicker Implementation with Daterangepicker
Tagify
Bootstrap Tags Implementation with Tagify
Dialer
Custom Bootstrap Dialer and Input Spinner Component
noUiSlider
noUiSlider and Bootstrap Integration
Password Meter
Custom Bootstrap Password Meter & Strength Checker Component
Inputmask
Inputmask Plugin & Bootstrap Integration
Bootstrap Multiselectsplitter
Bootstrap Multiselectsplitter Integration
Google reCAPTCHA
Google reCAPTCHA & Bootstrap Integration
DropzoneJS
DropzoneJS & Bootstrap Integration
Image Input
Custom Bootstrap Image Input with Preview Component
Bootstrap Maxlength
A visual feedback indicator for the maxlength attribute.
AmCharts
AmCharts & Bootstrap Integration
AmCharts
AmCharts Maps & Bootstrap Integration
AmCharts
AmCharts Stock & Bootstrap Integration
ApexCharts
ApexCharts & Bootstrap Integration
Chartjs
Chartjs & Bootstrap Integration
Overview
Attractive JavaScript plotting for jQuery
Basic Chart
Flotcharts Basic Examples
Axis Labels
Flotcharts Axis Labels Examples
Tracking Curves
Flotcharts Tracking Curves Examples
Dynamic Chart
Flotcharts Dynamic Chart Examples
Stack Chart Controls
Flotcharts Stack Chart Controls Examples
Bar Chart
Flotcharts Bar Chart Examples
Pie Chart
Flotcharts Pie Chart Examples
Overview
Google Charts Examples
Column Chart
Google Column Charts Examples
Pie Chart
Google Pie Charts Examples
Line Chart
Google Line Charts Examples
Tinymce Overview
Tinymce Editor and Bootstrap Integration
Basic TinyMCE
Tinymce Basic Examples
TinyMCE Plugins
Tinymce Editor Plugins Examples
TinyMCE Menubar
TinyMCE with Hidden Menubar Example
Overview
CKEditor & Bootstrap Integration
CKEditor Classic
CKEditor Classic Examples
CKEditor Inline
CKEditor Inline Examples
CKEditor Ballon
CKEditor Ballon Examples
CKEditor Balloon Block
CKEditor Balloon Block Examples
CKEditor Document
CKEditor Document Examples
Quill Overview
Quill & Bootstrap Integration
Quill Basic
Quill Basic Examples
Quill Autosave
Quill Autosave Examples
DataTables Overview
DataTables & Bootstrap Integration
DataTables
DataTables Basic Examples
DataTables
DataTables Advanced Examples
DataTables
DataTables Ajax Server Side Examples
API
DataTables API Examples
Draggable Overview
Draggable and Bootstrap Integration
Simple List
Draggable Simple List Examples
Multiple Containers
Draggable Multiple Containers Examples
Swappable
Draggable Swappable Examples
Restricted
Draggable Restricted Examples
Fullscreen Lightbox
Fullscreen Lightbox & Bootstrap Integration
Fullcalendar Overview
Fullcalendar & Bootstrap Integration
Basic
Fullcalendar Basic Examples
Drag-n-Drop
Fullcalendar Drag & Drop Examples
Selectable Dates
Fullcalendar Selectable Dates Examples
Background Events
Fullcalendar Background Events Examples
Localization
Fullcalendar Localization Examples
Timezone
Fullcalendar Timezone Examples
jKanban Overview
jKanban & Bootstrap Integration
Basic
jKanban Basic Examples
Colored
jKanban Colored Items Examples
Restricted
jKanban Restricted Items Examples
Rich Content
jKanban Rich Content Examples
Menu
Customm Bootstrap Menu component with Nested Dropdown & Accordion Submenu
Typed.js
Typed.js & Bootstrap Integration
Stepper
Custom Bootstrap Stepper & Wizard Component
Scroll
Custom Bootstrap Scrollbar Component
Cookie
Custom Cookie Component
Cropper
Cropper.js & Bootstrap Integration
Scroll
Custom Bootstrap Offcanvas & Drawer Component
Toastr
Toastr & Bootstrap Integration
BlockUI
BlockUI & Bootstrap Integration
Scrolltop
Custom Bootstrap Scrolltop Component
Search
Custom Bootstrap Quick Search Component
Smooth Scroll
Smooth Scroll and Bootstrap Integration
Sticky
Custom Bootstrap Sticky Component
Swapper
Custom Bootstrap Swapper Component
Scroll
Custom Bootstrap Toggle Component
Overview
Vis-timeline & Bootstrap Integration
Basic
Vis-timeline Basic Examples
Custom Styling
Vis-timeline Custom Styling Examples
Group
Vis-timeline Group Examples
Interaction
Vis-timeline Interaction Examples
Templates
Vis-timeline Templates Examples
jsTree Overview
jsTree & Bootstrap Integration
Basic
jsTree Basic Examples
Contextual Menu
jsTree Contextual Menu Examples
Custom Icons
jsTree Custom Icons Examples
Drag & Drop
jsTree Drag & Drop Examples
Checkable Tree
jsTree Checkable Tree Examples
Ajax Data
jsTree Ajax Data Examples
Tiny Slider Overview
Tiny slider for all purposes
Basic
Tiny Slider Basic Example
Custom Navs
Tiny Slider Custom Navigation Example
CountUp
Lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
Duotune
In-house Designed Duotune SVG Icon Set
Bootstrap Icons
Bootstrap Icons and Flaticon Integration
Fontawesome
Fontawesome Icons and Flaticon Integration
Line Awesome
Line Awesome Icons and Flaticon Integration
Suggestions:
Dark Mode
Dark Mode Setup for Layout & Components
Select2
Select2 and Bootstrap Integration
Flatpickr
Flatpickr and Bootstrap Integration for Bootstrap Datepicker and Timepicker
DataTables
DataTables Ajax Server Side Examples
Fullcalendar Overview
Fullcalendar & Bootstrap Integration
Duotune
In-house Designed Duotune SVG Icon Set
No result found
Please try again with a different query
jsTree is jquery plugin, that provides interactive trees. For more info please visit the plugin's
Homeor
Github Repo.
Drag & Drop
Here's a jsTree example with drag and drop functionality. For more info, please visit the
official website.
$("#kt_docs_jstree_dragdrop").jstree({
"core" : {
"themes" : {
"responsive": false
},
// so that create works
"check_callback" : true,
'data': [{
"text": "Parent Node",
"children": [{
"text": "Initially selected",
"state": {
"selected": true
}
}, {
"text": "Custom Icon",
"icon": "flaticon2-warning text-danger"
}, {
"text": "Initially open",
"icon" : "fa fa-folder text-success",
"state": {
"opened": true
},
"children": [
{"text": "Another node", "icon" : "fa fa-file text-waring"}
]
}, {
"text": "Another Custom Icon",
"icon": "flaticon2-bell-5 text-waring"
}, {
"text": "Disabled Node",
"icon": "fa fa-check text-success",
"state": {
"disabled": true
}
}, {
"text": "Sub Nodes",
"icon": "fa fa-folder text-danger",
"children": [
{"text": "Item 1", "icon" : "fa fa-file text-waring"},
{"text": "Item 2", "icon" : "fa fa-file text-success"},
{"text": "Item 3", "icon" : "fa fa-file text-default"},
{"text": "Item 4", "icon" : "fa fa-file text-danger"},
{"text": "Item 5", "icon" : "fa fa-file text-info"}
]
}]
},
"Another Node"
]
},
"types" : {
"default" : {
"icon" : "fa fa-folder text-success"
},
"file" : {
"icon" : "fa fa-file text-success"
}
},
"state" : { "key" : "demo2" },
"plugins" : [ "dnd", "state", "types" ]
});
<div id="kt_docs_jstree_dragdrop"></div>
2021©
Keenthemes
