Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Dragtext JS

  1. #1
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,260
    Thanks
    15
    Thanked 255 Times in 255 Posts

    Dragtext JS

    This was sweet. It only took about two hours to code it. You just hook it up to any page with SVG text elements and you can drag and drop them as you please.
    Code:
    	// Defining vars.
    txts=window.document.getElementsByTagName("text");
    var initX=0;
    var initY=0;
    var sw = 0;
    	// Disabling default behavior.
    document.ondragstart = function() { return false; };
    	// Assigning functions
    window.onload=function()
    	{
    for(i=0;i<txts.length;i++)
    		{
    	txts[i].onmousedown = liftMe;
    	txts[i].onmousemove = moveMe;
    	txts[i].onmouseup   = dropMe;
    		}
    	}
    	// End of assignments.
    	
    	// This function gets initial mouse and text positions.
    	function liftMe(e)
    	{
    	if (e == null) e = window.event; 
    	X = this.getAttribute("x");
    	Y = this.getAttribute("y");
    	initX = e.clientX-X;
    	initY = e.clientY-Y;
    	sw = 1;	
    	}
    	// This one changes the text position in step with the mouse. 
    	function moveMe(e)
    	{
    		if(sw==1)
    		{
    	xx=e.clientX-initX;
    	yy=e.clientY-initY;
    	this.setAttribute("x",xx)
    	this.setAttribute("y",yy)
    		}
    	}
    	// This stops the drag process and resets the variables.
    	function dropMe(e)
    	{
    	initX=0;
    	initY=0;
    	sw = 0;
    	}
    Last edited by DrDOS; 07-16-2013 at 09:15 PM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    please cleanup the global variables, buffer the lengths, and make it cross browser before posting it as an example for others to follow.

    you could also use object properties instead of the painfully slow setAttribute interface, not break the normal file/link drag out behavior, and provide guidance on how to customize and use it on a different site...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,260
    Thanks
    15
    Thanked 255 Times in 255 Posts
    Quote Originally Posted by rnd me View Post
    please cleanup the global variables, buffer the lengths, and make it cross browser before posting it as an example for others to follow.

    you could also use object properties instead of the painfully slow setAttribute interface, not break the normal file/link drag out behavior, and provide guidance on how to customize and use it on a different site...
    Well, I can rewrite it in object form, don't know why it didn't occur to me to do that, but how do I clean up the global variables, and buffer the lengths ?

    PS: This object method is not as simple for .svg as for .html. Most of the nodes are read only, which may be why I've seen others using the set and get Attribute method to modify the elements. Maybe you can show me a way around this. This isn't like changing the style object, which I do all the time.
    Last edited by DrDOS; 07-16-2013 at 10:23 PM. Reason: Add PS;
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,413
    Thanks
    11
    Thanked 595 Times in 575 Posts
    Quote Originally Posted by DrDOS View Post
    Well, I can rewrite it in object form, don't know why it didn't occur to me to do that, but how do I clean up the global variables, and buffer the lengths ?
    Well, here's a mini-cleanup/re-factor to avoid globals, allow many bound elements, and optimize the performance:

    sorry, I don't have time to test this as i've not used SVG before, but if anything's broke, try working on the "untested" lines first...

    Code:
    (function bootDnd(selector, root) {
    
    	//wait for readiness:
    	if (document.readyState != "complete") {
    		return setTimeout( bootDnd, 50 );
    	}
    
    
    	root = root || document.documentElement;
    
    	// Defining vars
    	var txts = root.querySelectorAll(selector) || [],
    		busy = 0;
    
    	// Assigning event handlers:
    	for (var i = 0, me, mx = txts.length; i < mx; i++) {
    		me = txts[i];
    		me.onmousedown = liftMe;
    		me.onmousemove = moveMe;
    		me.onmouseup = dropMe;
    
    		me.ondragstart = isNaN; //untested
    		me.onmouseout = dropMe; //untested (prevent down from sticking when moved off-screen or when mousing fast)
    
    		me.x =me.y =me.initX =initY =  0;
    	} /* next i++ */
    
    
    
    	// gets initial mouse and text positions.
    	function liftMe(e) {
    		e = e || window.event;
    		this.initX = e.clientX - this.x;
    		this.initY = e.clientY - this.y;
    		busy = 1;
    	} /* end liftMe() */
    
    
    	// changes the text position in step with the mouse. 
    	function moveMe(e) {
    		if (busy) {
    			this.x = e.clientX - this.initX;
    			this.y = e.clientY - this.initY;
    		}
    
    	} /* end moveMe() */
    
    
    	// This stops the drag process and resets the variables.
    	function dropMe(e) {
    		this.initX = 0;
    		this.initY = 0;
    		busy = 0;
    	}
    
    
    
    }("text", document.body));
    Last edited by rnd me; 07-17-2013 at 01:14 AM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,260
    Thanks
    15
    Thanked 255 Times in 255 Posts
    Well, thank you for that, I'll get to working with it. It occurs to me that I didn't really explain how this script was to be used. It's for linking to pages with an svg block in the page its self, such as in these examples:

    http://www.w3schools.com/svg/svg_examples.asp

    and not for svgs that are embeds or objects. It's really just for putting text or shapes over images or backgrounds, not for playing games on the web, or running animations. The usual svg methods don't work for this, but this method does. And it's plenty fast for that. So far I haven't got the 'obect' method to work because I don't know what object the x coordinate belongs to, at least on a web page.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •