Thanks! Please check the following:
Copyright (c) 2019 Axyn Technology (Ricardo Ruggiero)
All rights reserved.
This software is provided as is without any guarantees or warranty. In association with the product, Axyn Technology makes no warranties of any kind, either express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, of title, or of non-infringement of third party rights. Use of the product by a user is at the user’s risk. ALL SALES ARE FINAL.
NO REPRESENTATIONS OR WARRANTIES, EITHER EXPRESS OR IMPLIED, OF MERCHANTABILITY, FITNESS FOR A SPECIFIC PURPOSE, THE PRODUCTS TO WHICH THE INFORMATION MENTIONS MAY BE USED WITHOUT INFRINGING THE INTELLECTUAL PROPERTY RIGHTS OF OTHERS, OR OF ANY OTHER NATURE ARE MADE WITH RESPECT TO INFORMATION OR THE PRODUCT TO WHICH INFORMATION MENTIONS. IN NO CASE SHALL THE INFORMATION BE CONSIDERED A PART OF OUR TERMS AND CONDITIONS OF SALE.”
All rights reserved.
This software is provided as is without any guarantees or warranty. In association with the product, Axyn Technology makes no warranties of any kind, either express or implied, including but not limited to warranties of merchantability, fitness for a particular purpose, of title, or of non-infringement of third party rights. Use of the product by a user is at the user’s risk. ALL SALES ARE FINAL.
NO REPRESENTATIONS OR WARRANTIES, EITHER EXPRESS OR IMPLIED, OF MERCHANTABILITY, FITNESS FOR A SPECIFIC PURPOSE, THE PRODUCTS TO WHICH THE INFORMATION MENTIONS MAY BE USED WITHOUT INFRINGING THE INTELLECTUAL PROPERTY RIGHTS OF OTHERS, OR OF ANY OTHER NATURE ARE MADE WITH RESPECT TO INFORMATION OR THE PRODUCT TO WHICH INFORMATION MENTIONS. IN NO CASE SHALL THE INFORMATION BE CONSIDERED A PART OF OUR TERMS AND CONDITIONS OF SALE.”
Dropper
For Stacks 3.x and 4.x
Dropper
Innovative stack allowing images and other element stacks to be dragged and dropped dynamically on a web page.
DROPPER
- Dropper is an innovative advanced stack, which allows you to move almost ANY type of stacks, dynamically but temporarily, to any dropper stack in target mode in the same web page. That includes a single stack or a group of stacks, image stacks or other element stacks**.
When in Source (legacy stacks) mode almost ANY stack or group of stacks can be used with dropper.
The Axyn Image Fit Stack can be set to be natively draggable, making them the perfect companion to the Dropper stack. Also, UIKit3 Stacks that allow passing attributes can also be set to be natively draggable, such as image, paragraph, header, container, section, background etc.
In native source mode, the stack can be "grabbed" and "dragged" by clicking onto any part of the stack, in "legacy" source mode, the stacks can only be "grabbed" by the special handle (crosshair or similar) overlay.
With the Dropper Stack you can create dynamic web pages which engage visitors, as marketing and sales tools, and also in visual "what if" scenarios.
As demonstrated below, the user can move different elements on the page, further down on the page, a possible application of the dropper stack is demonstrated, in which the photos on the side bar can be dragged onto the living room wall and from which the "client" could select which images would work well together onto it.
The living room image exemplifies the Image Replacer stack, by which the living room image can be replaced by the user's own image.
Setup Instructions
Dropper has two modes: source and target
Source mode: drop a draggable stack such as Image Fit.
Drag the Image above into any dropper target on this page.
Image Fit stacks can be placed directly into a dropper source stack and still retain their settings when moved.
Image Fit stacks can be placed directly into a dropper source stack and still retain their settings when moved.
Set the Image Fit stack to "draggable"
Target mode: the dropper icon will display. Both in edit and runtime.
Dropper target!
Examples using the source legacy mode (add a "draggable" shell stack), with stacks that are not natively draggable
Source (legacy) mode: drop a draggable stack such as Image Fit.
Hello!
John Smith
Web Developer
TITLE
Description
Target mode: the dropper icon will display. Both in edit and runtime.
Another Dropper target!
Examples using UIKit3 element stacks.
Source mode: drop a draggable stack such as Image Fit.
Movable Header
Move Me!
To any Dropper target!
Color and other settings are kept as the Header Stack is inside either container or background stack.
Movable Header
Move Me!
To any Dropper target!
Color other settings NOT retained as it is not within another stack such as container or background...
I am movable too!
In this example, the background stack is given an ID and the code on the right to make it movable. Then a text stack (without modification) is dropped in to the background stack. When the background stack is moved, so are its contents
Add an ID and the following attributes in the advanced settings of the UIKit3 stack:
draggable="true" onmousedown="this.style.cursor = 'grabbing'" onmouseup="this.style.cursor = 'grab'" ondragstart="drag(event)" ondrag="this.style.cursor = 'move'" ondragend="this.style.cursor = 'grab'"
draggable="true" onmousedown="this.style.cursor = 'grabbing'" onmouseup="this.style.cursor = 'grab'" ondragstart="drag(event)" ondrag="this.style.cursor = 'move'" ondragend="this.style.cursor = 'grab'"
Target mode: the dropper icon will display. Both in edit and runtime.
Another Dropper target!
Usage example of Dropper and Image Replacer
Drag images into the wall and arrange them as you wish!
Use slide arrows to select the image arrangement.
Image Replacer Stack example:
Select your own background image!
Use arrows to adjust image size and positioning.
12" x 12"
20" x 20"
Images ©2019-2020 by Marie Laforge - www.marielaforge.com - courtesy provided and used with permission
© Copyright 2018-2019 - All rights reserved.