This is a demo page of how to use the InteractJS Drag and Drop components in my Nice toolkit.

The demo page has two parts:  

One allows dragging of elements and we record the displacement..  

The other allows drag 'n drop of elements onto and off of a surface, one element which is always accepted, and another which is never accepted.

These demonostrations show how to use the components.  Unlike typical EWB applications, a lot of the work is done by direct CSS manipulation.

The original InteractJS libraries depend on a slew of CSS settings.  I've converted some of that into function-based settings.   

Like the InteractJS.io own demo I use colours of objects' backgrounds so you can see what is happening.

In practice you will want to modify various other CSS attributes, but this gives you a start if you need drag and drop.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com

erickengelke wrote:

This is a demo page of how to use the InteractJS Drag and Drop components in my Nice toolkit.

The demo is available at:
https://erickengelke.com/nice/samples.html
EWB Programming Books and Component Library
http://www.erickengelke.com

Good stuff!

Question: How to get the center of the object? Would this work?

https://docwiki.embarcadero.com/CodeExamples/Alexandria/en/CenterPoint_(Delphi)

Trinione wrote:

>Good stuff!

Thanks

>Question: How to get the center of the object? Would this work?

I've added absx and absy.  If you compute ( absx + width div 2 , absy + height div 2) you will have the centre.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com

Trinione wrote:

>Good stuff!

Thanks

>Question: How to get the center of the object? Would this work?

I've added absx and absy.  If you compute ( absx + width div 2 , absy + height div 2) you will have the centre.

Erick
EWB Programming Books and Component Library
http://www.erickengelke.com