#142 ✓not_for_core
Hatsuharu

Mouse object (capture, drag, drop, stick, put)

Reported by Hatsuharu | June 5th, 2008 @ 03:48 PM

Hello, I'm a new web developer and one of my problems was how to position an element to the cursor position and the drag and drop functions.

Because of that I made an object that captures mouse and adds useful functions like:

Mouse.put(element,[xOffset, yOffset]), Mouse.drag(element,[xOffset, yOffset]), Mouse.drop(element), Mouse.stick(element,[xOffset, yOffset]), Mouse.detach(), ...

The source code is attached to this ticket. I hope that it could help in the prototype framework enhancement.

Best regards,

"jaikox"

Comments and changes to this ticket

  • Hatsuharu

    Hatsuharu June 5th, 2008 @ 01:30 PM

    I've added a defaultOffset property

  • Hatsuharu

    Hatsuharu June 5th, 2008 @ 03:59 PM

    I've improved the object with some functions:

    	/*
    		Sets Mouse properties to default values and starts the update event
    	*/
    	init : function(xoffset, yoffset){
    		xoffset = xoffset || 0;
    		yoffset = yoffset || 0;
    		Mouse.x = 0;
    		Mouse.y = 0;
    		Mouse.updating = false;
    		Mouse.sticker = null;
    		Mouse.defaultOffset.x = xoffset;
    		Mouse.defaultOffset.y = yoffset;
    		Mouse.startCapture();
    	}
    //[...]
    /*
    		Assigns to the element drag and drop features
    	*/
    	draggable : function (elem, xoffset, yoffset){
    		elem = $(elem);
    		xoffset = xoffset || (Mouse.defaultOffset.x - 15);
    		yoffset = yoffset || (Mouse.defaultOffset.y - 10);
    		elem.onmouseover = function(e) {
    			if (!e) e = window.event;
    			elem.style.cursor = "Move";
    		};
    		elem.onmouseout = function(e) {
    			if (!e) e = window.event;
    			elem.style.cursor = "Default";
    		};
    		elem.onmousedown = function(e) {
    			if (!e) e = window.event;
    			Mouse.drag(elem,xoffset,yoffset);
    		};
    		elem.onmouseup = function(e) {
    			if (!e) e = window.event;
    			Mouse.drop(elem);
    		};
    		
    	},
    	/*
    		Removes from the element the drag and drop events
    	*/
    	immovable : function (elem){
    		elem = $(elem);
    		elem.style.cursor = "Default";
    		elem.onmouseover = null;
    		elem.onmouseout = null;
    		elem.onmousedown = null;
    		elem.onmouseup = null;
    	}
    
  • John-David Dalton

    John-David Dalton June 5th, 2008 @ 04:57 PM

    • State changed from “new” to “enhancement”
  • John-David Dalton

    John-David Dalton June 5th, 2008 @ 04:58 PM

    • State changed from “enhancement” to “not_for_core”

    please post this to www.scripteka.com

  • Hatsuharu

    Hatsuharu June 6th, 2008 @ 03:28 AM

    Ok, sorry.

    Here are the extensions:

    http://trac.scripteka.com/ticket...

    I've updated it for better integration with prototype (using Element.addMethods and Object.expand).

  • Juriy Zaytsev

    Juriy Zaytsev June 6th, 2008 @ 05:07 AM

    I have already answered in Scripteka Trac, but just in case:

    Please use http://scripteka.com public interface to submit this extension (you would need to register first). If you don't have a dedicated home/api/demo page, Google Code provides a decent project hosting.

    Thanks.

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 02:01 AM

    • Tag set to events, position, section:lang

    [not-tagged:"object" tagged:"section:lang" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:41 AM

    • Tag changed from events, position, section:lang to events, section:dom, section:lang

    [not-tagged:"position" tagged:"section:dom" bulk edit command]

  • Tobie Langel

    Tobie Langel July 24th, 2009 @ 03:43 AM

    • Tag changed from events, section:dom, section:lang to section:dom, section:lang

    [not-tagged:"events" bulk edit command]

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

People watching this ticket

Pages