Need help and advice on editing JavaScript for website

Author

Message

Cyborg ART

17

Years of Service

User Offline

Joined: 14th Jan 2007

Location: Sweden - Sthlm

Posted: 8th Jun 2012 18:29

Link

Hi,

I am currently working on a website which uses drag & drop elements based upon this script:
http://www.dhtmlgoodies.com/index.html?whichScript=drag-drop-custom

It works perfect except for when giving the <div>, that acts as a container for the dragable boxes (in the examples from the above site its #leftColumn), a CSS "position:relative;" or anything that involves "position:X;".

If I set the position, the dragable box now gets an offset to the mouse the same distance as the difference from the X,Y of the screen and the X,Y of the <div>.

So instead of having the box right under the mouse, it is now positioned somewhere it shouldn't. Rendering the whole thing useless.

Now I wonder if there is a JavaScript guru out there that would be able to help me. I will really do anything in order to get it fixed. I could even pay if necessary.

I only got a base knowledgde of JavaScript, so I cant really seem to understand what does what in the .jscript from the download attached to the page above.

I really apreaciate all the help I can get!

Regards,
Joakim

Back to top

Profile PM Email Website

DeadTomGC

13

Years of Service

User Offline

Joined: 11th Aug 2010

Location: LU

Posted: 8th Jun 2012 18:33

Link

Well, I don't know javascript well, but coffee cup has a free editor with a lot of demos and example on how to do that kind of stuff.

Back to top

Profile PM Email Website

Cyborg ART

17

Years of Service

User Offline

Joined: 14th Jan 2007

Location: Sweden - Sthlm

Posted: 8th Jun 2012 19:29

Link

Well I allready got the scripts I want etc. but they wont behave as I want them to

It all worked perfectly when all elements where floating (float:left

, but I needed to set fixed positions for the elements and now they wont work as they should.

But I did found out that the drop itself works, if I "drop" the box when having the cursor over the target it acts normal, appart from the actual dragable box being offset.

If its of any help.

Back to top

Profile PM Email Website

Ortu

DBPro Master

16

Years of Service

User Offline

Joined: 21st Nov 2007

Location: Austin, TX

Posted: 9th Jun 2012 02:56

Link

without looking at the script or anything, it sounds like the problem may be more with the CSS than with the Javascript.

i.e. it's a display problem not a script problem as shown by

Quote: "But I did found out that the drop itself works, if I "drop" the box when having the cursor over the target it acts normal, appart from the actual dragable box being offset."

that being said, which ever side is handling the positioning, you should be able to use a negative offset to correct for the fixed position you set.

Back to top

Profile PM Email Website

MrValentine

AGK Backer

13

Years of Service

User Offline

Joined: 5th Dec 2010

Playing: FFVII

Posted: 9th Jun 2012 12:13

Link

Also force your margins to 0

Back to top

Profile PM

Dar13

15

Years of Service

User Offline

Joined: 12th May 2008

Location: Microsoft VisualStudio 2010 Professional

Posted: 9th Jun 2012 22:23

Link

Quote: "It all worked perfectly when all elements where floating (float:left, but I needed to set fixed positions for the elements and now they wont work as they should."

You could use jQuery to change the CSS for when they're being dragged, and then switch back to fixed when they're dropped.

i.e:

+ Code Snippet

function dragThingie()
{
   //starting drag...
   $(dragID).css('float','left');
   $(dragID).css('position','relative');

   //stopping drag
   $(dragID).css('float','none');
   $(dragID).css('position','fixed');
   $(dragID).css('left','yourpositionhere px');
}

Follow WTLD's progress on Twitter
Git repository for WasTeLanD

Back to top

Profile PM Email

Ortu

DBPro Master

16

Years of Service

User Offline

Joined: 21st Nov 2007

Location: Austin, TX

Posted: 10th Jun 2012 17:24

Link

You might try placing the floating div inside another fixed div to act as a boundary to the floater

Back to top

Profile PM Email Website

Cyborg ART

17

Years of Service

User Offline

Joined: 14th Jan 2007

Location: Sweden - Sthlm

Posted: 11th Jun 2012 14:32

Link

Quote: "without looking at the script or anything, it sounds like the problem may be more with the CSS than with the Javascript.

i.e. it's a display problem not a script problem as shown by

Quote: "But I did found out that the drop itself works, if I "drop" the box when having the cursor over the target it acts normal, appart from the actual dragable box being offset."

that being said, which ever side is handling the positioning, you should be able to use a negative offset to correct for the fixed position you set.
"

I cant seem to find where I should edit to a negative offset, will take another look.

Quote: "Also force your margins to 0
"

The margins isn't affecting the script in a negative way.

Quote: "Quote: "It all worked perfectly when all elements where floating (float:left, but I needed to set fixed positions for the elements and now they wont work as they should."
You could use jQuery to change the CSS for when they're being dragged, and then switch back to fixed when they're dropped.

i.e:+ Code Snippet"

Well, the dragthingies are actually floatig allready.

Quote: "You might try placing the floating div inside another fixed div to act as a boundary to the floater
"

Didn't work

Did anyone download and looked at the actual files?
I have tried several things outside the script but nothing did work, so it has to be within the script.

This is a key feature on the website. So as stated, anyone who can help me with this will be rewarded.

Back to top

Profile PM Email Website

Ortu

DBPro Master

16

Years of Service

User Offline

Joined: 21st Nov 2007

Location: Austin, TX

Posted: 12th Jun 2012 02:40 Edited at: 12th Jun 2012 02:41

Link

ok, I've started picking apart the script (it's pretty nifty) and it looks like if you set the main div to fixed with a positioning along the lines of:

<div id="mainContainer" style="position:fixed;top:100px;left:100px;">

you get the issue you are describing.

it seems like you can realign the box to the cursor in the .js script here (from line 495):

+ Code Snippet

// Reposition dragable element
		if(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][1]){
			referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.top = dhtmlSuiteCommonObj.getTopPos(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0])-100 + 'px';
			referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged].style.left = dhtmlSuiteCommonObj.getLeftPos(referenceToDragDropObject.dragDropSourcesArray[referenceToDragDropObject.numericIdToBeDragged][0]) + 'px';
		}

where you modify the style.top and style.left by an inverse of your fixed positioning after the array object and before the 'px'.

You should be able to convert this to a variable which gets passed in to the __initDragDropElement function.

or alternatively, you can edit in your offset in this function starting at line 571:

__moveDragableElement : function(e)
	{
		if(document.all)e = event;
		if(referenceToDragDropObject.dragDropTimer<5)return;	
		var dragObj = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged];
		
		if(referenceToDragDropObject.currentEl_allowX){			
			
			var leftPos = (e.clientX - referenceToDragDropObject.mouse_x + referenceToDragDropObject.el_x);
			if(referenceToDragDropObject.drag_maxX){
				var tmpMaxX = referenceToDragDropObject.drag_maxX - dragObj.offsetWidth;
				if(leftPos > tmpMaxX)leftPos = tmpMaxX
				if(leftPos < referenceToDragDropObject.drag_minX)leftPos = referenceToDragDropObject.drag_minX;				
			}
			dragObj.style.left = leftPos + 'px'; 
		
		}	
		if(referenceToDragDropObject.currentEl_allowY){
			var topPos = (e.clientY - referenceToDragDropObject.mouse_y + referenceToDragDropObject.el_y);
			if(referenceToDragDropObject.drag_maxY){	
				var tmpMaxY = referenceToDragDropObject.drag_maxY - dragObj.offsetHeight;		
				if(topPos > tmpMaxY)topPos = tmpMaxY;
				if(topPos < referenceToDragDropObject.drag_minY)topPos = referenceToDragDropObject.drag_minY;	
				
			}			
			
			dragObj.style.top = topPos + 'px'; 
		}
		
	}

+ Code Snippet

__moveDragableElement : function(e)
	{
		if(document.all)e = event;
		if(referenceToDragDropObject.dragDropTimer<5)return;	
		var dragObj = referenceToDragDropObject.dragObjCloneArray[referenceToDragDropObject.numericIdToBeDragged];
		
		if(referenceToDragDropObject.currentEl_allowX){			
			
			var leftPos = (e.clientX - referenceToDragDropObject.mouse_x + referenceToDragDropObject.el_x);
			if(referenceToDragDropObject.drag_maxX){
				var tmpMaxX = referenceToDragDropObject.drag_maxX - dragObj.offsetWidth;
				if(leftPos > tmpMaxX)leftPos = tmpMaxX
				if(leftPos < referenceToDragDropObject.drag_minX)leftPos = referenceToDragDropObject.drag_minX;				
			}
			dragObj.style.left = leftPos + 'px'; 
		
		}	
		if(referenceToDragDropObject.currentEl_allowY){
			var topPos = (e.clientY - referenceToDragDropObject.mouse_y + referenceToDragDropObject.el_y);
			if(referenceToDragDropObject.drag_maxY){	
				var tmpMaxY = referenceToDragDropObject.drag_maxY - dragObj.offsetHeight;		
				if(topPos > tmpMaxY)topPos = tmpMaxY;
				if(topPos < referenceToDragDropObject.drag_minY)topPos = referenceToDragDropObject.drag_minY;	
				
			}			
			
			dragObj.style.top = topPos + 'px'; 
		}
		
	}

where you would similarly modify against:

dragObj.style.left = leftPos + 'px';
dragObj.style.top = topPos + 'px';

Back to top

Profile PM Email Website

spooky

21

Years of Service

User Offline

Joined: 30th Aug 2002

Location: United Kingdom

Posted: 12th Jun 2012 02:42

Link

Ortu has pointed you in right direction with;

Quote: "
that being said, which ever side is handling the positioning, you should be able to use a negative offset to correct for the fixed position you set.
"

Basically you need to fiddle with offsets based on the position of leftColumn. I've done it by adding a couple of new functions called getTopPosOffset and getLeftPosOffset and then using these in a few places in the js file.

I've attached modified js file and modified versions of the demo html files to demonstrate. Should put you in right direction, however your layout is probably completely different and you'll need to make other adjustments.

If I were you I would not use this script at all as it's from many many years ago and there are loads of modern jquery ones that are more likely to work properly and in all browsers.

Boo!

Attachments

Login to view attachments

Back to top

Profile PM Website

Cyborg ART

17

Years of Service

User Offline

Joined: 14th Jan 2007

Location: Sweden - Sthlm

Posted: 29th Jun 2012 21:01

Link

Sorry for late answer.

Thanks for all the help! It means a lot to know that there are people here that not only say "thats doable", but actually shows how to do it

Thanks!

Back to top

Profile PM Email Website

Sorry your browser is not supported!

Geek Culture / Need help and advice on editing JavaScript for website

Attachments