Drag drop in javaScript (coffeescript)


# helper function
put = ()-> console.log "Arguments : ", arguments

###
get position when it was clicked.
###

class Drag_me
	constructor: (@bg_div)->

	make_dynamic:()->
		bg_el = $ @bg_div

		mouse_down = false

		bg_el.mousedown (e)->
			# mouse_down
			mouse_down = true

			# see if it was right click, (1 = right click, 2 = middle click, 3 for left click)
			if e.which == 1

				# some time chrome uses default cursor so to prevent this
				e.originalEvent.preventDefault();

				# change mouse icon
				bg_el.css('cursor','all-scroll')

				# get current position x stands for left and right, y stands for top to button (z for depth)
				origin_x = e.clientX
				origin_y = e.clientY

				# get current position
				left = parseInt(bg_el.css('left'), 10)
				top = parseInt(bg_el.css('top'),  10)

				$(this).mousemove (e)->

					# if mouse click is not active then don't do anything.
					if mouse_down is true

						# get distance then minus with original mouse position (when it was clicked),
						# now we have the mouse distance
						x = e.clientX - origin_x
						y = e.clientY - origin_y

						# add covers distance to div's position
						bg_el.css('left', (left + x) + 'px')
						bg_el.css('top', (top + y) + 'px')
					  
		.mouseup (e)->
			# set back to false
			mouse_down = false

			# set cursor back to default
			bg_el.css('cursor','auto')
			
d = new Drag_me(".wrapper")
d.make_dynamic()


### css for div
	.wrapper {
		height: 200px;
		border: 1px solid red;
		position: absolute;
		left: 0px;
		top: 0px;
	}
###



### extra info 
	mouse x,y coordinates 
	put "clientX:", e.clientX, "clientY:", e.clientY 

	same as clientX
	put "screenX:", e.screenX, "screenY:", e.screenY

	browsers height and width
	put "view.outerHeight:" , e.view.outerHeight, "view.outerWidth:" , e.view.outerWidth

	offset from x and y coordinates
	put "pageXOffset:" , e.view.pageXOffset, "pageYOffset:" , e.view.pageYOffset
###
Advertisements

7 thoughts on “Drag drop in javaScript (coffeescript)

  1. Fine way of telling, and good article to take facts about my presentation subject,
    which i am going to convey in academy. get twitter followers supplies good quality
    public expert services.
    ways to get more enjoys about facebook, you always can certainly
    get more twitter followers
    Maybe you have silently asked yourself how you can buy real twitter followers in facebook?

    Buyers can twitter followers through many very affordable
    services.
    buy twitter followers cheap Low-cost in addition to Protected with regard
    to facebook accounts.

  2. I love it whenever people get together and share ideas.
    Great website, keep it up! shopping for instagram supporters,
    instagram
    If you want to instagram to your instagram account, there
    are several very effective ways.

  3. Simply desire to say your article is as astonishing.
    The clarity on your post is simply great and that i can think you’re an expert on this subject.
    Fine with your permission allow me to take hold of your feed to stay
    updated with forthcoming post. Thanks 1,000,000 and please carry on the enjoyable work.
    twitter
    twitter

  4. Hola! I’ve been reading your weblog for a while now and finally got the
    courage to go ahead and give you a shout out from
    Austin Texas! Just wanted to tell you keep up the
    great job! twitter
    twitter
    twitter

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s