Mouse Dragging in Love2D (Tutorials)

[BlackBulletIV]

Instead of writing a reply to heartmonster's question, I decided to write a tutorial. As you might guess, it covers my method of making objects draggable with the mouse. So, without further ado, here's the link:

Mouse Dragging in Love2D

[Purdy]

Great work man! The concept was sort of hard for me to grasp before, being new to LOVE and Lua, but you really cleared it up; thanks man!

[BlackBulletIV]

Thanks for your feedback! Also, welcome to the forums.

[heartmonster]

Instead of writing a reply to heartmonster's question, I decided to write a tutorial. As you might guess, it covers my method of making objects draggable with the mouse. So, without further ado, here's the link:

Mouse Dragging in Love2D

First of all, THANK YOU! So, so helpful. Kind of a mixture between what I could figure out and what I definitely couldn't figure out on my own. But this is such a simple issue that I'm really surprised such a tutorial didn't already exist, and I'm grateful you could provide.

One further question though: What would I do if I wanted to be able to drag several different objects? For example--

If I were to establish this in love.load:

Code: Select all

objects = {}

for i = 1, 5 do
object.x = #
object.y = #
object.height = #
object.width = #

So I have five objects (the #marks stand for numbers. I didn't feel like writing random numbers in this post. Laziness!), and I want to make each of them click-and-draggable independently. I integrated your tutorial code into my code, but it only made the first object rendered draggable.

How do I make the drag thing work for all five? Or all whatever number? Thanks!!!

[BlackBulletIV]

Glad to be of help.

You could wrap the code relating to dragging in love.update, love.mousepressed, love.mousereleased inside of a loop which iterates through all the objects. You could then execute the code on the current object in the iteration. An example:

Code: Select all

function love.update(dt)
  for _, v in pairs(objects) do
    if v.dragging.active then
      v.x = love.mouse.getX() - v.dragging.diffX
      v.y = love.mouse.getY() - v.dragging.diffY
    end
  end
end

Again, there are many ways to do this, but this way will (theoretically - I haven't tested it) work fine with the tutorial's example.

[heartmonster]

Gah! That is exactly what I have been doing. (Or so I think... being new to this, I could be making an incredibly stupid mistake without realizing it...) In the spirit of finding out wtf I'm doing wrong, I've attached my code...

Let me know if you can figure out my problem! As you'll see if you run the program, all the squares are converging when I click on one of them. I do not understand why.

(Before, as I said, I could get ONE of the squares to behave properly. So now I have kind of the opposite problem...)

Thank you again!!

[BlackBulletIV]

Many of the references were still pointing box, not v. Also, you didn't implement the loop in love.mousereleased. Here's the new code (with your style preserved ):

Code: Select all

--boxstory 2: the reckoning

function love.load()
	
	love.graphics.setBackgroundColor( 220, 176, 233, 255)
	
	boxes = {} --setting up some boxes
	

	
	for i=1, 5 do --the individual boxes
		box = {
		width = 40,
		height = 40,
		x = 70,
		y = i*80,
		
		drag = { --drag? might not work so much.
		active = false,
		diffX = 0,
		diffY = 0}
		}
		
		table.insert(boxes, box)
				
	end
	
	bigBox = {} --big giant box properties
	
	bigBox.x = 700
	bigBox.y = 250
	bigBox.width = 100
	bigBox.height = 100

end


function love.update(dt)
	
	for i,v in ipairs(boxes) do --mouseclick drag thingy
	
		if v.drag.active then
			v.x = love.mouse.getX() - v.drag.diffX
			v.y = love.mouse.getY() - v.drag.diffY
		end
		
	end
	
end


function love.draw()
	
	--draw big box and flaps
	love.graphics.setColor( 255, 255, 255, 30)
	love.graphics.rectangle("fill", bigBox.x, bigBox.y, bigBox.width, bigBox.height)
	love.graphics.line(670, 200, 700, 250)
	love.graphics.line(670, 400, 700, 350)
	
	--draw all the small boxes	
	for i,v in ipairs(boxes) do
		love.graphics.setColor( 255, 255, 255, 95)
		love.graphics.rectangle("fill", v.x, v.y, v.width, v.height)
		
		--make the boxes highlight when little box is in big box
		if v.x > bigBox.x and v.x < bigBox.x + 100 and v.y > bigBox.y and v.y < bigBox.y + 100 then
			love.graphics.setColor( 220, 176, 233, 40)
			love.graphics.rectangle("fill", v.x, v.y, v.width, v.height)
			love.graphics.setColor( 255, 255, 255, 30)
			love.graphics.rectangle("fill", bigBox.x, bigBox.y, bigBox.width, bigBox.height)
			love.graphics.line(670, 200, 700, 250)
			love.graphics.line(670, 400, 700, 350)
		end
		
	end
	
	
end


function love.mousepressed(x, y, button)

	--make the dragging happen
	for i,v in ipairs(boxes) do
	
		if button == "l"
		and x > v.x and x < v.x+v.width
		and y > v.y and y < v.y+v.height
		then
			v.drag.active = true
			v.drag.diffX = x - v.x
			v.drag.diffY = y - v.y
		end
		
	end
end
	
	
function love.mousereleased(x, y, button)
	
	--make the dragging stop happening
	for i,v in ipairs(boxes) do
		
		if button == "l"
			then v.drag.active = false
		end
	
	end
end	


function love.keypressed(key)
	
	--quit on "q"
	if key == "escape" then
		love.event.push "q"
	end

end

[heartmonster]

Many of the references were still pointing box, not v. Also, you didn't implement the loop in love.mousereleased. Here's the new code (with your style preserved ):

Thank you!!! That works, as I'm sure you know. Awesome.

[BlackBulletIV]

No worries.

[Kilo]

In 2022 this thread is still a top google hit for "love2d mouse drag", so for anyone trying to use this...
The author's original writeup is findable here: https://web.archive.org/web/20201125055 ... in-love2d/
and his original code is here: https://gist.github.com/mebens/1196228

However, after Love 0.10.0, the current love.mouse callbacks use numbers rather than letter strings to identify the mouse buttons,
so lines that say:

Code: Select all

    button == "l"

have to be changed to say:

Code: Select all

    button == 1

Otherwise, the code still works.