CatoDrop 0.2 Jquery Plugin - How to use

How to use

1. Include nessesary JS files

Loading jQuery from CDN (Content Delivery Network) is recommended.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fLoadingSite/jquery.CatoDrop-0.2-pack.js"></script>

2. Call function

We'll just do an easy function call. The plugin will load the content into the class "content".

<script type="text/javascript">
$(window).bind("load", function() {
$('#content').CatoDrop();
});
</script>

We will just use standard options.

3. Setup Page

Now let's add the needed content to our document. First we'll create a container called content.

<div id="content"></div>

After that will add some dropAble elements with class 'droggable'

<ul class="droppable"></div>

Now will add some dragable elements with class 'droppable' to the dropable items
Add an id for recognize the category later.

<ul class="droppable" id="1"><li class="draggable" id="3">Leopold</li><li class="draggable" id="5">Julie</li>
</ul>

Add an info div

Add an info DIV to view status

<p id="info"></p>

5. Final page

Your done building up your page. It should look like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript" src="/fLoadingSite/jquery.CatoDrop-0.1-pack.js"></script>

<script type="text/javascript">
$(window).bind("load", function() {
$('#content').CatoDrop();
});
</script>

<div id="content">
<div><h2>Category 1</h2>
<ul class="droppable" id="1"><li class="draggable" id="1">Leopold</li><li class="draggable" id="2">Julie</li><li class="draggable" id="3">Sam</li></ul></div></div>
<div><h2>Category 2</h2>
<ul class="droppable" id="1"><li class="draggable" id="4">Jos</li><li class="draggable" id="5">Frank</li><li class="draggable" id="6">Tim</li></ul></div></div>

<p id="info"></p>

6. Create mysql tables

Here's a sample of mysql tables & data

CREATE TABLE IF NOT EXISTS `cats` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;


INSERT INTO `cats` (`id`, `name`) VALUES
(1, 'Category 1'),
(2, 'Category 2'),
(3, 'Category 3');


CREATE TABLE IF NOT EXISTS `data` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `data` text NOT NULL,
  `catid` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

INSERT INTO `data` (`id`, `data`, `catid`) VALUES
(1, 'John', 2),
(2, 'Frans', 3),
(3, 'Leopold', 1),
(4, 'Mario', 2),
(5, 'Julie', 1),
(6, 'Stefanie', 3),
(7, 'Tim', 2),
(8, 'Eline', 2),
(9, 'Sam', 1),
(10, 'Anthony', 2);

7. Get element info through PHP

The informatie about the elements is send through POST.

<?php
$_POST["objid"]; // id from the dragable
$_POST["catid"]; // id from the category where the dragable element is dropped
$_POST["name"]; // text from dragable
?>

8. Ready to go

Hooray! Your plugin should work now!
You can setup some extra options to customize.
You can added infinite of links. Just set the up as showed in step 2.
All options are listed below.

Options

Key	Default value	Description
dragID	draggable	class of the elements you want to make dragable
dropID	droppable	class of the elements you want to make dropable
callBackUrl	php/save.php	relative path to PHP handler script
loadingText	false	Text you want to show will loading content
infoBox	#info	ID of the element to echo respons
autoSave	true	should the content be saved on drop or not
sortable	false	make category's sortable
sortableArray	sortableArray	The name of the array that contains the sortable array
checkVersion	false	On True, CatoDrop will check for newer released versions of CatoDrop

PHP vars through POST METHOD

Name	Description
$_POST["objid"]	returns id from the dragable
$_POST["catid"]	returns id from the category
$_POST["name"]	returns text from dragable
$_POST["sortableArray"]	returns array of sortables in current state (can be changed throw 'sortableArray' option)