Page 1 of 1
[How To] Drag object - semi-transparent preview effect
Posted: Fri Feb 28, 2014 10:23 am
by palanolho
Greetings everyone,
I'm implementing a drag & drop functionality in order to add objects into a group.
(ex: you have a tool bar with several geometric shapes. When you drag one of them and drop it inside the group, a copy of that shape is created inside the group in the location you dropped it.)
I used this LC tutorial as reference:
http://lessons.runrev.com/s/lessons/m/2 ... -an-object
but I have changed the
Code: Select all
set the [b]acceptDrop[/b] to true -> set the [b]dragAction [/b]to "copy"
since the references mention that the acceptDrop is deprecated and dragAction does the same thing
So, everything works fine, whoever, Im missing something that I really would like to see on my app.
When you drag inside the group, the mouse cursor changes to a pointer with a [+] (like you are adding something to where your mouse pointer is. That OK, however, I also would like to see some kind of generic semi-transparent shape so that it's easier for the user to understand that he is dragging something inside the group area (the same effect that happens when you drag-drop something on your desktop or grag-drop a new control from the toolbar into a stack on livecode.
so, my question is ...
Any one knows how this can be done?
many thanks in advance,
- Miguel
Re: [How To] Drag object - semi-transparent preview effect
Posted: Fri Feb 28, 2014 10:40 am
by LCNeil
Hi Miguel,
You will want to look into the dragImage property as this will allow you to set an image for the item you are dragging.
Please find attached a sample stack that show dragging one image into another, with a transparent preview.
Kind Regards,
Neil Roger
--
RunRev Support Team ~
http://www.runrev.com
——
Re: [How To] Drag object - semi-transparent preview effect
Posted: Fri Feb 28, 2014 9:10 pm
by palanolho
hi Neil,
That EXACTLY what I need
However ... I'm having some trouble ....
I notices that you assigned the dragImage to the id of "image 1", however, your image ID is
I tried with some images I have on my stack and I was not able to make it work correctly.
For example... the code bellow
Code: Select all
set the dragImage to id of img 100 of stack "SUPPORT - ICONS"
shows an certain image. however, the correct image ID is 1756
if I use he correct image ID, the system says it cant find the object.
I have also tried using the name of the image, but nothing happens.
Why is that? what am I doing wrong?
Many thanks,
- Miguel
Re: [How To] Drag object - semi-transparent preview effect
Posted: Mon Mar 03, 2014 12:56 pm
by LCNeil
Hi Miguel,
LiveCode looks for the drag image in the following order-
1) The stack of the current object's behavior (if applicable)
2) The stack of the owner of the current object's behavior (if applicable)
...
n) The stack of the current object's stack's behavior (if applicable)
A) The current object's stack
B) The current object's stack's mainstack (if a substack)
C) The current object's stack's mainstacks substacks
D) The list of open stacks, in order they were loaded
Although rare, it could be that there is an image ID conflict on your stack so the image ID you are referencing is used elsewhere in your application.
If possible, could you supply a sample stack that exhibits the issue and we may be able to find out what is causing it.
Kind Regards,
Neil Roger
--
RunRev Support Team ~
http://www.runrev.com
——
Re: [How To] Drag object - semi-transparent preview effect
Posted: Mon Mar 03, 2014 8:35 pm
by palanolho
Here's an example
I have deletes lots of things and kept the minimum. Didn't change any of the original IDs though.
https://www.dropbox.com/s/rhrtd16je0qss ... k.livecode
(why can I add attachs to the post? ...

)
Re: [How To] Drag object - semi-transparent preview effect
Posted: Tue Mar 04, 2014 10:40 am
by LCNeil
Hi Miguel,
You have to zip up your LiveCode stack before you can post it to the forum
I have had a look at your stack and I have a few comments-
- There is no image 100 on your "SUPPORT - ICONS" stack so you will not be able to set the imageData to this. There is only 1 image (a jigsaw piece) so you can only use "image 1"
-There is no image called square01 on your "SUPPORT - ICONS" stack so again, this is why you will not be able to reference it and an error will occur.
-The currently set ID for the jigsaw image on the "SUPPORT - ICONS" stack is "1820038" so you would have to use this to reference the jigsaw piece.
Be careful with image IDs as the following are some that are reserved by LiveCode-
* 1-100: reserved for built-in cursors
* 101-135: reserved for built-in brush shapes
* 236-300: reserved for built-in patterns
* 301-1000: reserved for built-in icons
* 101,000-103,000: reserved
* 200,000-299,999: reserved for application use
Hopefully this will give you some leads as to why these errors are occurring.
Kind Regards,
Neil Roger
--
RunRev Support Team ~
http://www.runrev.com
——
Re: [How To] Drag object - semi-transparent preview effect
Posted: Tue Mar 04, 2014 3:32 pm
by FourthWorld
@runrevneil and others: Please note that the dragImage does not currently work on Linux:
http://quality.runrev.com/show_bug.cgi?id=9386
Re: [How To] Drag object - semi-transparent preview effect
Posted: Tue Mar 04, 2014 10:21 pm
by palanolho
Greetings Neil,
I think you misunderstood something.
on my stack, the cod on each drag button uses the image on top of it, except the last one that uses an image on another stack.
the first 2 buttons I'm assigning the dragImage directly to the ID of the image
the last one, I'm assigning it through the name of the image on the other stack.
Did you notice that?
I can see that the first button displays a very fade image but all the others display none.
Can you check again please?
here's the stack again with a more clean code
Many thanks,
- Miguel
Re: [How To] Drag object - semi-transparent preview effect
Posted: Wed Mar 05, 2014 10:32 am
by LCNeil
Hi Miguel,
I do think we were getting our wires crossed
When you mentioned "set the dragImage to id of img 100 of stack "SUPPORT - ICONS", I thought the ID of that image (from another stack) related to the issue you were experiencing. This along with me testing your stack on the Mac platform, did confuse things a little as everything works as expected (see attached video)
I then tested your stack on my windows machine(I believe this is the O/S that you are working on), and was able to replicate the issue you are experiencing. It would seem that there is a bug within the Windows version of LiveCode that means the dragImage data is not being properly set.
As this is the case, I would recommend filing a report with our Quality Control Team as they will be able to investigate the issue further-
http://quality.runrev.com
You will need to sign in with a quality control account before you can submit a report. If you do not have one, please use the "New Account" option that is shown on the Quality Control Homepage.
Kind Regards,
Neil Roger
--
RunRev Support Team ~
http://www.runrev.com
——
———
Re: [How To] Drag object - semi-transparent preview effect
Posted: Wed Mar 05, 2014 11:39 am
by palanolho
It seems that someone has already reported it.
I have added some comments to the report
http://quality.runrev.com/show_bug.cgi?id=5836
by SCHENKEL JAN 2008-08-04 06:48:06 BST
I think I found the cause:
when I right-click on 'My computer' to go the 'System properties' > tab 'Advanced' > box 'Performance' > button 'Settings'
I just noticed that the 'Visual Effects' settings were chosen as 'Adjust for best performance'.
Once I turned that to 'Adjust for best appearance' the drag images started to appear. Turn it back to best performance, and no more dragImage.
The confusing part is that Windows Explorer still displays its drag images, which lead to the assumption that it only didn't work in Revolution.
(...)
Re: [How To] Drag object - semi-transparent preview effect
Posted: Wed Mar 05, 2014 3:03 pm
by LCNeil
Hi Miguel,
Thank you for adding a comment to the report. This will hopefully give our Quality Control Team some leads and assist with resolving the issue.
Kind Regards,
Neil Roger
--
RunRev Support Team ~
http://www.runrev.com
——