jorextensions.com free extensions for WYSIWYG Webbuilder
jordan (6j6)
jordan (6j6)
tutorial for module | CoreUI draggable
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
jor_aniMateMASTERPACKv3.0 build 5
jordan (6j6) - jorextensions.com
TUTORIAL module | CoreUI draggable - basic
Welcome to this tutorial for jor_aniMateMASTERPACKv3.0 ...
In this tutorial we will use module | CoreUI draggable to create a basic draggable object
Module | CoreUI draggable can be found under the section 03. MODULES PRIMARY in the extension
Module | CoreUI draggable can be found under the section 03. MODULES PRIMARY in the extension
THE SELECTOR ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
.
To work with jor_aniMateMASTERPACKv3.0 it is crucial to understand the selector input
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
To gain an understanding of the selector input see the jor_aniMateMASTERPACKv3.0 online manual first
see here ...
• Selectors Simplified
• When do we animate what ?
In this tutorial we are going to create a basic draggable object
Creating a "basic" tutorial for module | CoreUI draggable is actually not possible
Virtually any object can be turned into a draggable object by simply targeting it with the correct selector
The strength of this module lies in the knowledge and creativity to use the available options and
functions to create a draggable object that fits a personal design
This module is a tool first and foremost
Let's cover a "basic" draggable setup anyway ... Let's go ...
Virtually any object can be turned into a draggable object by simply targeting it with the correct selector
The strength of this module lies in the knowledge and creativity to use the available options and
functions to create a draggable object that fits a personal design
This module is a tool first and foremost
Let's cover a "basic" draggable setup anyway ... Let's go ...
We activate a draggable by targeting an object with the correct selector
In this tutorial we are using a WB Image object, the selector property is set to #wb_dragImage
In this tutorial we are using a WB Image object, the selector property is set to #wb_dragImage
selector = #wb_dragImage
Activating a draggable object is nothing more then targeting an object with the correct selector
But it is using the available options and functions that makes this module a powerful tool
This tutorial will extend a little more into that
But it is using the available options and functions that makes this module a powerful tool
This tutorial will extend a little more into that
That's the full basic multiple draggable objects tutorial completed
What is jor_aniMateMASTERPACKv3.0 ?
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
jor_aniMateMASTERPACKv3.0 is a collection of 15+ modules and 8+ tools combined in one extension
They can work together as a pack to create a complete new extension or modules can be used freestanding
jor_aniMateMASTERPACKv3.0 is a tool first and foremost - combined with creativity the possibilities are endless
Download the demo's of the above tutorials here as WB project ...
module | CoreUI draggable is a tool of jor_aniMateMASTERPACKv3.0 build 5 • 2009 - 2015
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
more demo's, info, online manual, etc for jor_aniMateMASTERPACKv3.0 visit jorextensions.com
jor_aniMateMASTERPACKv3.0 free extension for WYSIWYG Webbuilder
extension and code: jordan (6j6)
Hope you found these tutorials informative and useful ...
Module | CoreUI draggable can be used in many other setups
These demo's should be a good start point to experiment with
Module | CoreUI draggable can be used in many other setups
These demo's should be a good start point to experiment with
Online Manual
Online Manual - module | CoreUI draggable
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
Online Manual - module | CoreUI draggable
Online Manual - Selectors Simplified..
Online Manual - When do we animate what ?
WYSIWYG Webbuilder Forum Topic JMPv3.0
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
More tutorials for JMPv3.0 see Online Tutorials
More free WB extensions visit jorextensions.com
Back To Top
That's all ... the Image is activated as a draggable
That's the full basic draggable object tutorial completed
"Each module of jor_aniMateMASTERPACKv3.0 is a tool"
A tool more then often will offer multiple options leading to the same result or a similar result
To create multiple draggable objects we could simply create a new instance for each draggable
Or more advanced, we could call one instance with different variables - it is a function
Or, if it fits our design, we could use the selector input
In this tutorial we will use the latter, the selector input method
Because here all we want to create is multiple draggable objects that all function on the same values
A tool more then often will offer multiple options leading to the same result or a similar result
To create multiple draggable objects we could simply create a new instance for each draggable
Or more advanced, we could call one instance with different variables - it is a function
Or, if it fits our design, we could use the selector input
In this tutorial we will use the latter, the selector input method
Because here all we want to create is multiple draggable objects that all function on the same values
multiple draggables
selector = #wb_dragImage1,#wb_dragImage2,#wb_dragImage3,#wb_dragImage4
In this tutorial we want to activate 4 WB Image objects as draggables
We can simply string the IDs of the Image objects separating them with a comma
In essence that is all that is needed to activate multiple draggable objects with a constructed selector
We can simply string the IDs of the Image objects separating them with a comma
In essence that is all that is needed to activate multiple draggable objects with a constructed selector
Level: Easy to Moderate
CoreUI draggable - basic - tutorial
A draggable object
Tutorial 1
Tutorial 2
Multiple draggable objects
TUTORIAL
jor_aniMateMASTERPACKv3.0 b5
module | CoreUI draggable
jor_aniMateMASTERPACKv3.0 b5
module | CoreUI draggable
SEE LIVE DEMO 1
SEE LIVE DEMO 1
SEE LIVE DEMO 2A
DOWNLOAD DEMOS
activating a draggable - the selector
activating multiple draggables - the selector
the stack selector
Most likely we want these draggable objects to automatically interact in there stacking order
We prefer the last dragged object to stay on top, we have to set the stack | selector property for that
Again, multiple methods could be used, but for simplicity we'll stick with one method
For the selector property we used a constructed selector
Here for the stack | selector property we will be using exactly that same constructed selector
We prefer the last dragged object to stay on top, we have to set the stack | selector property for that
Again, multiple methods could be used, but for simplicity we'll stick with one method
For the selector property we used a constructed selector
Here for the stack | selector property we will be using exactly that same constructed selector
stack | selector = #wb_dragImage1,#wb_dragImage2,#wb_dragImage3,#wb_dragImage4
All our draggable objects will now interact in there stacking order keeping the last dragged on top
That's all the inputs we have to set for our multiple draggable objects
That's all the inputs we have to set for our multiple draggable objects
the snap selector
Let's do one quick fun alteration ... for a draggable itself is nothing more then a draggable object
It's by using the available options and functions and creativity that makes this module a powerful tool
Let's enable the snap | selector property by setting it to true
It's by using the available options and functions and creativity that makes this module a powerful tool
Let's enable the snap | selector property by setting it to true
snap | selector = true
This enables all our draggables to snap to each others edge
We can choose to snap to the inner, outer or both with the snap | mode property, here we used both
A draggable itself is nothing more then a draggable object
It's by using the available options and functions and creativity that makes this module a powerful tool
We can choose to snap to the inner, outer or both with the snap | mode property, here we used both
A draggable itself is nothing more then a draggable object
It's by using the available options and functions and creativity that makes this module a powerful tool
SEE LIVE DEMO 2B
ADDITIONAL SECTION!
THE SELECTOR
This tutorial will not go into what a selector is ? , but it is a great opportunity to examine the importance of the selector
EXAMINE 1
In the above tutorials we activated WB Images objects to become draggable, and the selector became #wb_dragImage..
We added a wb_ in front of the Image ID - because here we always want to target the outer element
We want to drag the element that holds the position of the WB object, we are changing the objects position
If the object is not wrapped, has no outer element, the object itself holds the position, then we target the object itself
A quick reference into the structure of many WB object can be found here reference: quick list
EXAMINE 2
In the above tutorial we used true as selector on the snap | selector property
If our design allows it, or requires it, we could also have used an element as selector like div
The snap interaction of the draggable would now occur with pretty much everything on the page
Because almost all object are build on the element div
Knowledge of the selector is the KEY to jor_aniMateMASTERPACKv3.0
This can't be stressed out enough ...
"The better understanding of the selector the more we can get out of jor_aniMateMASTERPACKv3.0"!
UPDATE: jor_aniMateMASTERPACKv3.0 build 5.2 update **NEW**
JMPv3.0 CoreUI modules (draggable) now also functions on touch devices ...
JMPv3.0 CoreUI modules (draggable) now also functions on touch devices ...
Comments, feedback etc regarding this tutorial please post them at the WB Forum Topic JMPv3.0 ...
jordan (6j6)
jordan (6j6)
