Drag and drop divs

[B34ST]

Hi, I have been adapting a script I found at dhtmlgoodies.com the script was originally an rss feed fetcher with dragable divs. I only require the dragable divs so I removed the rss part. My demo can be found at http://fantasyfootball.sportsontheweb.net/script1.html

 

The first problem I have is that I want to insert content into these divs dynamically so instead of using the javascript way of creating the div:

 

var htmlContentOfNewBox = '<DIV>This is a static box created from the function createDefaultBoxes().<br /><br /><br /><br /><br /><br /></div>';	// HTML content of new box
var titleOfNewBox = 'This is a static box';	// The box is not stored in cookie - we need to create it.

var newIndex = createABox(1,'staticObject1');
document.getElementById('dragableBoxContent' + newIndex).innerHTML = htmlContentOfNewBox;		
document.getElementById('dragableBoxHeader_txt' + newIndex).innerHTML = titleOfNewBox;

 

I would like to be able to create the div using html:

 

<div id="draggable-box"></div>

 

The second thing I would like to do is have a button which can be clicked to add another box like this example: http://fantasyfootball.sportsontheweb.net/script2.html

 

Thanks for any help

[alexweber15]

sorry for not answering your question but i have to say you're doing it the hard way...

 

jQuery UI draggables

 

$("#divname").draggable();

 

there, you can drag your div

 

ps - you have to have jquery library installed and ui too but sure as hell beats old school js

 

anyway apologies for not answering your question directly

 

[B34ST]

Thanks for the reply and no problem about answering directly, alternatives are always handy to know

 

I have briefly looked into your suggestion, however I am not sure that it will have all the features that I require. As far as I can see that option only allows you to drag a div and not sort it for example you will be able to place one div ontop of another instead of sorting them. Or is there more advanced options in your method?

 

thanks again

[alexweber15]

that was just the simplest of examples, if you look around the documentation in the link in my previous post there's different stuff like "draggables", "droppables", "sortables" and so on so you can mix and match behaviors (ie: if you only use drabbagles and not droppables you can drag objects but cant attach functionality to dropping the somewhere!)

 

so yeah in short you can do what you want but you should check out the examples