Download arrange content script

Demo | Demo 2

Bookmark and Share

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Put this into your <HEAD> section

Put this into your <BODY> section

Download images

This script requires 3 images. You can download them from this zip file. Put them in a sub folder called images or change the image references in the HTML code:

<div id="insertionMarker">
  <img src="images/marker_top.gif">
  <img src="images/marker_middle.gif" id="insertionMarkerLine">
  <img src="images/marker_bottom.gif">
</div>

Setup

Specifying dragable content

The dragable boxes are all created by use of plain HTML. Example:

<div id="dragableElementsParentBox">
  <div class="bigArticle" dragableBox="true" id="article1">
    <h4>Heading 1</h4>
    <p>Splendida porro oculi fugitant vitantque tueri</p>
  </div>
  <div class="smallArticle" dragableBox="true" id="article2">
    <h4>Heading 2</h4>
    <p>Splendida porro oculi fugitant vitantque tueri</p>
  </div>
  <div class="smallArticle" dragableBox="true" id="article3">
    <h4>Heading 3</h4>
    <p>Splendida porro oculi fugitant vitantque tueri</p>
  </div>
  <div class="clear" id="clear"></div>    
</div>

First of all, you have the <div id="dragableElementsParentBox"> which is the parent element of all dragable boxes. Inside of this tag, you define your dragable boxes by specifying the the attribute dragableBox="true".

Remember also to give your dragable items unique id's. These id's are used when data is saved.

Javascript variables

At the top of the <SCRIPT> section, you will find 3 Javscript variables which you can customize:

var rectangleBorderWidth = 2;
var useRectangle = false;
var autoScrollSpeed = 4;

  • rectangleBorderWidth = This is a variable used to create the correct size of the dotted rectangle. Increase this value if you're using a thicker dotted border.
  • useRectangle = This variables indicates whether you are using the dotted rectangle to indicate where items will be dropped. Set it to true if you're using the rectangle, set it to false if you want to use the black "pipe" image.
  • autoScrollSpeed = When dragging is in progress and your mouse pointer is at the top or at the bottom of the browser window, the script will automatically scroll up or down. This variable indicates the speed of this auto scroll. Higher value = faster scrolling

Saving data

After rearranging your boxes, you can save the changes by use of a saveData() function. This function creates a semicolon separated string with the id's of your dragable boxes. Example: 'item 1;item 2;item 3;item 5;item 4';. What you have to do is to create a form, put this string into a hidden form field and then submit it. This code should be put in the bottom of the saveData() function. Example:

document.forms[0].itemOrder.value = saveString;
document.forms[0].submit;

Comments

Sangam Uprety
Going to try this on a CMS!
Sangam Uprety at 12:55PM, 2011/07/07.
Teun
Hi!First of all, awesome script!After clicking "save" there can't be done any changes. Is there a possibility to make an "edit" button or something?
Teun at 07:56AM, 2012/02/14.
Sameer
Hi, i have tried this codes but not working at all i have tried all the ways but the dragable content is not moving at all, please help me if you dont mind
Sameer at 06:21AM, 2012/03/21.
shahadat
whare donwload link?
shahadat at 10:02AM, 2012/07/04.
Roberta
I have tried to save, but when I have reloaded the page, the sequence is not maintained. Is it possible maintain the sequence after reloaded?
Roberta at 04:44PM, 2012/07/30.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com