How do I drag and drop items within a LiveCode application?

Question

I am building a LiveCode stack and want to add drag drop into my app. In particular, I would like to be able to click on one image and drag it to a second location.

I would also like to provide feedback to the user that they are in fact dragging. A thumbnail would be ideal.

I know how to change the cursor when I hover over my image:

on mouseEnter
   lock cursor
   set the cursor to "hand"
end mouseEnter

on mouseLeave
   unlock cursor 
end mouseLeave

Neil Roger · Accepted Answer · 2014-03-04T09:52:05.730

Dragging within LiveCode is accomplished by the various drag messages that are available. An example of this if you have two images on your stack would be-

Script of image 1

on dragStart
   set the dragData["text"] to the text of image 1
   set the dragImage to the id of me
end dragStart

Script of Image 2

on dragEnter
 set the dragaction to "copy"
end dragEnter

on dragDrop
 set the text of the target to the dragData["text"]
end dragDrop

When image 1 is clicked and dragged, its text (contents) are placed into the dragData array, its dragAction is set to copy and the drag image is set to the image id of itself. THis is the transparent image that indicates what you are dragging.

In image 2, when a user is dragging and enters the image, it sets the acceptDrop to true and when the user releases the mouse (dragDrop) the text of the image is set the to the dragData["text"] array

Devin · Answer 2 · 2014-05-05T16:53:00.067

While the drag and drop suite of commands and messages is rich and powerful, if all you need to do is move something from one location to another inside of your application window, don't overlook the simple grab command. It allows you to click down on an object and have the object follow your mouse pointer until you release the mouse button. For example, the following script in the object to be dragged works well.

on mouseDown
   grab me
end mouseDown

on mouseUp
   # do whatever evaluation you need to do here
   # e.g., check to see whether the drop location is a valid target area
   # Here is one way to do it:
   if the location of the target is within the rect of graphic "hotspot" then
     put "That's right!" into fld "feedback"
   end if

   # If you are dragging to an irregular target area do this instead:
   if within(graphic "irregularPoly",the loc of the target) then
     put "That's right!" into fld "feedback"
   end if
end mouseUp

You write # e.g., check to see whether the drop location is a valid target area. How would you do that? — z--, Mar 11 '14 at 13:56

How do I drag and drop items within a LiveCode application?

2 Answers2