Stacks Image 97

Get up to 50% back on the purchase of the Axyn Ecwid Stacks

Click here for details

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.”

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 stack type of stack, a group of stacks, image stacks or other element stacks**, dynamically but temporarily, to any dropper stack in target mode in the same web page.

Now 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 Dropper you can dazzle your clients, to display photos or images in different 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.
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.
Stacks Image 2242
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'"
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
Stacks Image 12
© Copyright 2018-2019 - All rights reserved.