Multiple Drag & Drop Category Management with PHP/Mysqli

Mysqli

Multilevel Drag & Drop Category Management in PHP/MySQLi.

Now a day Mysql is going to deprecated and you are getting this Meggase in error log: “The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead”.

So i used Mysqli for drag and drop Category management, so you use this in letest updated mysqli project. 🙂

CREATE TABLE category

(

id int,

category varchar(255),

des varchar(255),

position varchar(255),

status varchar(255)

class varchar(255)

parent varchar(255)

rang varchar(255)

);

index.php

<?php
include"conn.php";
?>

.dd { position: relative; display: block; margin: 0; padding: 0; max-width: 600px; list-style: none; font-size: 13px; line-height: 20px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-align:left }

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
.dd-list .dd-list { padding-left: 30px; }
.dd-collapsed .dd-list { display: none; }

.dd-item,
.dd-empty,
.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd-handle:hover { color: #2ea8e5; background: #fff; }

.dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
.dd-item > button[data-action="collapse"]:before { content: '-'; }

.dd-placeholder,
.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; font-family:Verdana, Arial, Helvetica, sans-serif }
.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                      -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                         -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff), 
                              linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
	
}

.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
.dd-dragel > .dd-item .dd-handle { margin-top: 0; }
.dd-dragel .dd-handle {font-family:Verdana, Arial, Helvetica, sans-serif;
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
            box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
}

/**
 * Nestable Extras
 */

.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 0px solid #ddd; border-bottom: 0px solid #ddd; }

#nestable-menu { padding: 0; margin: 20px 0; }

#nestable-output,
#nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }
#nestableMenu-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

#nestable2 .dd-handle {
    color: #fff;
    border: 1px solid #999;
    background: #bbb;
    background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);
    background:    -moz-linear-gradient(top, #bbb 0%, #999 100%);
    background:         linear-gradient(top, #bbb 0%, #999 100%);
}
#nestable2 .dd-handle:hover { background: #bbb; }
#nestable2 .dd-item > button:before { color: #fff; }

@media only screen and (min-width: 700px) {

.dd { float: left; width: 48%; }
    .dd + .dd { margin-left: 2%; }

}

.dd-hover > .dd-handle { background: #2ea8e5 !important; }

/**
 * Nestable Draggable Handles
 */

.dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);
    -webkit-border-radius: 3px;
            border-radius: 3px;
    box-sizing: border-box; -moz-box-sizing: border-box;
}
.dd3-content:hover { color: #2ea8e5; background: #fff; }

.dd-dragel > .dd3-item > .dd3-content { margin: 0; font-family:Verdana, Arial, Helvetica, sans-serif; }

.dd3-item > button { margin-left: 30px; }

.dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;
    border: 1px solid #aaa;
    background: #ddd;
    background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);
    background:    -moz-linear-gradient(top, #ddd 0%, #bbb 100%);
    background:         linear-gradient(top, #ddd 0%, #bbb 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.dd3-handle:before { content: '='; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }
.dd3-handle:hover { background: #ddd; }
</style>

<?php
		
		/* Function menu_showNested
		 * @desc Create inifinity loop for nested list from database
		 * @return echo string
		*/
		function menu_showNested($parentID) {
			
			include"conn.php";

$sql = "SELECT * FROM category WHERE parent='$parentID' ORDER BY rang";
			$result = mysqli_query($db, $sql);
			$numRows = mysqli_num_rows($result);
			
			if ($numRows > 0) {
				echo "\n";
				echo "<ol class='dd-list'>\n";
					while($row = mysqli_fetch_array($result)) {
						echo "\n";
						
						echo "<li class='dd-item' data-id='{$row['id']}'>\n";
							echo "<div class='dd-handle'>{$row['category']}</div>\n";
						
							// Run this function again (it would stop running when the mysql_num_result is 0
							menu_showNested($row['id']);
						
						echo "</li>\n";
					}
				echo "</ol>\n";
			}
		}
		
		
		
		
		## Show the top parent elements from DB
		######################################

include"conn.php";
		
		$sql = "SELECT * FROM category WHERE parent='0' ORDER BY rang asc";
		$result = mysqli_query($db, $sql);
		$numRows = mysqli_num_rows($result);
		
		
		echo "<div class='cf nestable-lists'>\n";
			echo "<div class='dd' id='nestableMenu'>\n\n";
				echo "<ol class='dd-list'>\n";
				
					while($row = mysqli_fetch_array($result)) {
						echo "\n";
						
						echo "<li class='dd-item' data-id='{$row['id']}'>";
							echo "<div class='dd-handle'>{$row['category']}</div>";
						
						
						menu_showNested($row['id']);
						
						echo "</li>\n";
					}
					
				echo "</ol>\n\n";
			echo "</div>\n";
		echo "</div>\n\n";
		
		
		// Feedback div for update hierarchy to DB
		// IMPORTANT: This needs to be here! But you can remove the style
		//echo "<div id='sortDBfeedback' style='border:1px solid #eaeaea; padding:10px; margin:15px;'></div>\n";
		
		
		// Script output for debuug
		//echo "<textarea id='nestableMenu-output'></textarea>";
		
	?>
	
    
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/jquery.nestable.js"></script>
	<script>

$(document).ready(function()
	{
		
		/* The output is ment to update the nestableMenu-output textarea
		 * So this could probably be rewritten a bit to only run the menu_updatesort function onchange
		*/
		
		var updateOutput = function(e)
		{
			var list   = e.length ? e : $(e.target),
				output = list.data('output');
			if (window.JSON) {
				output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
				menu_updatesort(window.JSON.stringify(list.nestable('serialize')));
			} else {
				output.val('JSON browser support required for this demo.');
			}
		};
		
		// activate Nestable for list menu
		$('#nestableMenu').nestable({
			group: 1
		})
		.on('change', updateOutput);

// output initial serialised data
		updateOutput($('#nestableMenu').data('output', $('#nestableMenu-output')));

$('#nestable-menu').on('click', function(e)
		{
			var target = $(e.target),
				action = target.data('action');
			if (action === 'expand-all') {
				$('.dd').nestable('expandAll');
			}
			if (action === 'collapse-all') {
				$('.dd').nestable('collapseAll');
			}
		});

$('#nestable3').nestable();

});
	</script>
    <script src="js/functions.js"></script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

<?php

include"conn.php";

<style>

/**

* Nestable

.dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }

.dd-list .dd-list { padding-left: 30px; }

.dd-collapsed .dd-list { display: none; }

.dd-item,

.dd-empty,

.dd-placeholder { display: block; position: relative; margin: 0; padding: 0; min-height: 20px; font-size: 13px; line-height: 20px; }

.dd-handle { display: block; height: 30px; margin: 5px 0; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;

background: #fafafa;

background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);

background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);

background: linear-gradient(top, #fafafa 0%, #eee 100%);

-webkit-border-radius: 3px;

border-radius: 3px;

box-sizing: border-box; -moz-box-sizing: border-box;

}

.dd-handle:hover { color: #2ea8e5; background: #fff; }

.dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }

.dd-item > button[data-action="collapse"]:before { content: '-'; }

.dd-placeholder,

.dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; font-family:Verdana, Arial, Helvetica, sans-serif }

.dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;

background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),

-webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);

background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),

-moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);

background-image: linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),

linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);

background-size: 60px 60px;

background-position: 0 0, 30px 30px;

}

.dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }

.dd-dragel > .dd-item .dd-handle { margin-top: 0; }

.dd-dragel .dd-handle {font-family:Verdana, Arial, Helvetica, sans-serif;

-webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);

box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);

}

/**

* Nestable Extras

.nestable-lists { display: block; clear: both; padding: 30px 0; width: 100%; border: 0; border-top: 0px solid #ddd; border-bottom: 0px solid #ddd; }

#nestable-menu { padding: 0; margin: 20px 0; }

#nestable-output,

#nestable2-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

#nestableMenu-output { width: 100%; height: 7em; font-size: 0.75em; line-height: 1.333333em; font-family: Consolas, monospace; padding: 5px; box-sizing: border-box; -moz-box-sizing: border-box; }

#nestable2 .dd-handle {

color: #fff;

border: 1px solid #999;

background: #bbb;

background: -webkit-linear-gradient(top, #bbb 0%, #999 100%);

background: -moz-linear-gradient(top, #bbb 0%, #999 100%);

background: linear-gradient(top, #bbb 0%, #999 100%);

}

#nestable2 .dd-handle:hover { background: #bbb; }

#nestable2 .dd-item > button:before { color: #fff; }

@media only screen and (min-width: 700px) {

.dd { float: left; width: 48%; }

.dd + .dd { margin-left: 2%; }

}

.dd-hover > .dd-handle { background: #2ea8e5 !important; }

/**

* Nestable Draggable Handles

.dd3-content { display: block; height: 30px; margin: 5px 0; padding: 5px 10px 5px 40px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;

background: #fafafa;

background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);

background: -moz-linear-gradient(top, #fafafa 0%, #eee 100%);

background: linear-gradient(top, #fafafa 0%, #eee 100%);

-webkit-border-radius: 3px;

border-radius: 3px;

box-sizing: border-box; -moz-box-sizing: border-box;

}

.dd3-content:hover { color: #2ea8e5; background: #fff; }

.dd-dragel > .dd3-item > .dd3-content { margin: 0; font-family:Verdana, Arial, Helvetica, sans-serif; }

.dd3-item > button { margin-left: 30px; }

.dd3-handle { position: absolute; margin: 0; left: 0; top: 0; cursor: pointer; width: 30px; text-indent: 100%; white-space: nowrap; overflow: hidden;

border: 1px solid #aaa;

background: #ddd;

background: -webkit-linear-gradient(top, #ddd 0%, #bbb 100%);

background: -moz-linear-gradient(top, #ddd 0%, #bbb 100%);

background: linear-gradient(top, #ddd 0%, #bbb 100%);

border-top-right-radius: 0;

border-bottom-right-radius: 0;

}

.dd3-handle:before { content: '='; display: block; position: absolute; left: 0; top: 3px; width: 100%; text-align: center; text-indent: 0; color: #fff; font-size: 20px; font-weight: normal; }

.dd3-handle:hover { background: #ddd; }

</style>

<?php

/* Function menu_showNested

* @desc Create inifinity loop for nested list from database

* @return echo string

function menu_showNested($parentID) {

include"conn.php";

$sql = "SELECT * FROM category WHERE parent='$parentID' ORDER BY rang";

$result = mysqli_query($db, $sql);

$numRows = mysqli_num_rows($result);

if ($numRows > 0) {

echo "\n";

echo "<ol class='dd-list'>\n";

while($row = mysqli_fetch_array($result)) {

echo "\n";

echo "<li class='dd-item' data-id='{$row['id']}'>\n";

echo "<div class='dd-handle'>{$row['category']}</div>\n";

// Run this function again (it would stop running when the mysql_num_result is 0

menu_showNested($row['id']);

echo "</li>\n";

}

echo "</ol>\n";

}

## Show the top parent elements from DB

######################################

include"conn.php";

$sql = "SELECT * FROM category WHERE parent='0' ORDER BY rang asc";

$result = mysqli_query($db, $sql);

$numRows = mysqli_num_rows($result);

echo "<div class='cf nestable-lists'>\n";

echo "<div class='dd' id='nestableMenu'>\n\n";

echo "<ol class='dd-list'>\n";

while($row = mysqli_fetch_array($result)) {

echo "\n";

echo "<li class='dd-item' data-id='{$row['id']}'>";

echo "<div class='dd-handle'>{$row['category']}</div>";

menu_showNested($row['id']);

echo "</li>\n";

}

echo "</ol>\n\n";

echo "</div>\n";

echo "</div>\n\n";

// Feedback div for update hierarchy to DB

// IMPORTANT: This needs to be here! But you can remove the style

//echo "<div id='sortDBfeedback' style='border:1px solid #eaeaea; padding:10px; margin:15px;'></div>\n";

// Script output for debuug

//echo "<textarea id='nestableMenu-output'></textarea>";

$(document).ready(function()

{

/* The output is ment to update the nestableMenu-output textarea

* So this could probably be rewritten a bit to only run the menu_updatesort function onchange

var updateOutput = function(e)

{

var list = e.length ? e : $(e.target),

output = list.data('output');

if (window.JSON) {

output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));

menu_updatesort(window.JSON.stringify(list.nestable('serialize')));

} else {

output.val('JSON browser support required for this demo.');

}

};

// activate Nestable for list menu

$('#nestableMenu').nestable({

group: 1

})

.on('change', updateOutput);

// output initial serialised data

updateOutput($('#nestableMenu').data('output', $('#nestableMenu-output')));

$('#nestable-menu').on('click', function(e)

{

var target = $(e.target),

action = target.data('action');

if (action === 'expand-all') {

$('.dd').nestable('expandAll');

}

if (action === 'collapse-all') {

$('.dd').nestable('collapseAll');

}

});

$('#nestable3').nestable();

});

</script>

conn.php

<?php

$db = new mysqli('localhost', 'root', '', 'treeview');

if($db->connect_errno > 0){

die('Unable to connect to database [' . $db->connect_error . ']');

}

jquery.nestable.js (Create a Folder name ‘js’ e.g. js/jquery.nestable.js)

;(function($, window, document, undefined)
{
    var hasTouch = 'ontouchstart' in window;

/**
     * Detect CSS pointer-events property
     * events are normally disabled on the dragging element to avoid conflicts
     * https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js
     */
    var hasPointerEvents = (function()
    {
        var el    = document.createElement('div'),
            docEl = document.documentElement;
        if (!('pointerEvents' in el.style)) {
            return false;
        }
        el.style.pointerEvents = 'auto';
        el.style.pointerEvents = 'x';
        docEl.appendChild(el);
        var supports = window.getComputedStyle && window.getComputedStyle(el, '').pointerEvents === 'auto';
        docEl.removeChild(el);
        return !!supports;
    })();

var eStart  = hasTouch ? 'touchstart'  : 'mousedown',
        eMove   = hasTouch ? 'touchmove'   : 'mousemove',
        eEnd    = hasTouch ? 'touchend'    : 'mouseup';
        eCancel = hasTouch ? 'touchcancel' : 'mouseup';

var defaults = {
            listNodeName    : 'ol',
            itemNodeName    : 'li',
            rootClass       : 'dd',
            listClass       : 'dd-list',
            itemClass       : 'dd-item',
            dragClass       : 'dd-dragel',
            handleClass     : 'dd-handle',
            collapsedClass  : 'dd-collapsed',
            placeClass      : 'dd-placeholder',
            emptyClass      : 'dd-empty',
            expandBtnHTML   : '<button data-action="expand">Expand</button>',
            collapseBtnHTML : '<button data-action="collapse">Collapse</button>',
            group           : 0,
            maxDepth        : 20,
            threshold       : 20
        };

function Plugin(element, options)
    {
        this.w  = $(window);
        this.el = $(element);
        this.options = $.extend({}, defaults, options);
        this.init();
    }

Plugin.prototype = {

init: function()
        {
            var list = this;

list.reset();

list.el.data('nestable-group', this.options.group);

list.placeEl = $('<div class="' + list.options.placeClass + '"/>');

$.each(this.el.find(list.options.itemNodeName), function(k, el) {
                list.setParent($(el));
            });

list.el.on('click', 'button', function(e) {
                if (list.dragEl || (!hasTouch && e.button !== 0)) {
                    return;
                }
                var target = $(e.currentTarget),
                    action = target.data('action'),
                    item   = target.parent(list.options.itemNodeName);
                if (action === 'collapse') {
                    list.collapseItem(item);
                }
                if (action === 'expand') {
                    list.expandItem(item);
                }
            });

var onMoveEvent = function(e)
            {
                if (list.dragEl) {
                    e.preventDefault();
                    list.dragMove(hasTouch ? e.touches[0] : e);
                }
            };

var onEndEvent = function(e)
            {
                if (list.dragEl) {
                    e.preventDefault();
                    list.dragStop(hasTouch ? e.touches[0] : e);
                }
            };

if (hasTouch) {
                list.el[0].addEventListener(eStart, onStartEvent, false);
                window.addEventListener(eMove, onMoveEvent, false);
                window.addEventListener(eEnd, onEndEvent, false);
                window.addEventListener(eCancel, onEndEvent, false);
            } else {
                list.el.on(eStart, onStartEvent);
                list.w.on(eMove, onMoveEvent);
                list.w.on(eEnd, onEndEvent);
            }

serialize: function()
        {
            var data,
                depth = 0,
                list  = this;
                step  = function(level, depth)
                {
                    var array = [ ],
                        items = level.children(list.options.itemNodeName);
                    items.each(function()
                    {
                        var li   = $(this),
                            item = $.extend({}, li.data()),
                            sub  = li.children(list.options.listNodeName);
                        if (sub.length) {
                            item.children = step(sub, depth + 1);
                        }
                        array.push(item);
                    });
                    return array;
                };
            data = step(list.el.find(list.options.listNodeName + ':first'), depth);
            return data;
        },

serialise: function()
        {
            return this.serialize();
        },

reset: function()
        {
            this.mouse = {
                offsetX   : 0,
                offsetY   : 0,
                startX    : 0,
                startY    : 0,
                lastX     : 0,
                lastY     : 0,
                nowX      : 0,
                nowY      : 0,
                distX     : 0,
                distY     : 0,
                dirAx     : 0,
                dirX      : 0,
                dirY      : 0,
                lastDirX  : 0,
                lastDirY  : 0,
                distAxX   : 0,
                distAxY   : 0
            };
            this.moving     = false;
            this.dragEl     = null;
            this.dragRootEl = null;
            this.dragDepth  = 0;
            this.hasNewRoot = false;
            this.pointEl    = null;
        },

expandItem: function(li)
        {
            li.removeClass(this.options.collapsedClass);
            li.children('[data-action="expand"]').hide();
            li.children('[data-action="collapse"]').show();
            li.children(this.options.listNodeName).show();
        },

collapseItem: function(li)
        {
            var lists = li.children(this.options.listNodeName);
            if (lists.length) {
                li.addClass(this.options.collapsedClass);
                li.children('[data-action="collapse"]').hide();
                li.children('[data-action="expand"]').show();
                li.children(this.options.listNodeName).hide();
            }
        },

expandAll: function()
        {
            var list = this;
            list.el.find(list.options.itemNodeName).each(function() {
                list.expandItem($(this));
            });
        },

collapseAll: function()
        {
            var list = this;
            list.el.find(list.options.itemNodeName).each(function() {
                list.collapseItem($(this));
            });
        },

setParent: function(li)
        {
            if (li.children(this.options.listNodeName).length) {
                li.prepend($(this.options.expandBtnHTML));
                li.prepend($(this.options.collapseBtnHTML));
            }
            li.children('[data-action="expand"]').hide();
        },

unsetParent: function(li)
        {
            li.removeClass(this.options.collapsedClass);
            li.children('[data-action]').remove();
            li.children(this.options.listNodeName).remove();
        },

dragStart: function(e)
        {
            var mouse    = this.mouse,
                target   = $(e.target),
                dragItem = target.parents(this.options.itemNodeName + ':first');

this.placeEl.css('height', dragItem.height());

mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left;
            mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top;
            mouse.startX = mouse.lastX = e.pageX;
            mouse.startY = mouse.lastY = e.pageY;

this.dragRootEl = this.el;

this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);
            this.dragEl.css('width', dragItem.width());
            dragItem.replaceWith(this.placeEl).appendTo(this.dragEl);
            $(document.body).append(this.dragEl);
            this.dragEl.css({
                'left' : e.pageX - mouse.offsetX,
                'top'  : e.pageY - mouse.offsetY
            });
            // total depth of dragging item
            var i, depth,
                items = this.dragEl.find(this.options.itemNodeName);
            for (i = 0; i < items.length; i++) {
                depth = $(items[i]).parents(this.options.listNodeName).length;
                if (depth > this.dragDepth) {
                    this.dragDepth = depth;
                }
            }
        },

dragStop: function(e)
        {
            this.placeEl.replaceWith(this.dragEl.html());
            this.dragEl.remove();
            this.el.trigger('change');
            if (this.hasNewRoot) {
                this.dragRootEl.trigger('change');
            }
            this.reset();
        },

dragMove: function(e)
        {
            var list, parent, prev, next, depth,
                opt   = this.options,
                mouse = this.mouse;

this.dragEl.css({
                'left' : e.pageX - mouse.offsetX,
                'top'  : e.pageY - mouse.offsetY
            });

// mouse position last events
            mouse.lastX = mouse.nowX;
            mouse.lastY = mouse.nowY;
            // mouse position this events
            mouse.nowX  = e.pageX;
            mouse.nowY  = e.pageY;
            // distance mouse moved between events
            mouse.distX = mouse.nowX - mouse.lastX;
            mouse.distY = mouse.nowY - mouse.lastY;
            // direction mouse was moving
            mouse.lastDirX = mouse.dirX;
            mouse.lastDirY = mouse.dirY;
            // direction mouse is now moving (on both axis)
            mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX > 0 ? 1 : -1;
            mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY > 0 ? 1 : -1;
            // axis mouse is now moving on
            var newAx   = Math.abs(mouse.distX) > Math.abs(mouse.distY) ? 1 : 0;

// do nothing on first move
            if (!mouse.moving) {
                mouse.dirAx  = newAx;
                mouse.moving = true;
                return;
            }

// calc distance moved on this axis (and direction)
            if (mouse.dirAx !== newAx) {
                mouse.distAxX = 0;
                mouse.distAxY = 0;
            } else {
                mouse.distAxX += Math.abs(mouse.distX);
                if (mouse.dirX !== 0 && mouse.dirX !== mouse.lastDirX) {
                    mouse.distAxX = 0;
                }
                mouse.distAxY += Math.abs(mouse.distY);
                if (mouse.dirY !== 0 && mouse.dirY !== mouse.lastDirY) {
                    mouse.distAxY = 0;
                }
            }
            mouse.dirAx = newAx;

/**
             * move horizontal
             */
            if (mouse.dirAx && mouse.distAxX >= opt.threshold) {
                // reset move distance on x-axis for new phase
                mouse.distAxX = 0;
                prev = this.placeEl.prev(opt.itemNodeName);
                // increase horizontal level if previous sibling exists and is not collapsed
                if (mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {
                    // cannot increase level when item above is collapsed
                    list = prev.find(opt.listNodeName + ':last');
                    // check if depth limit has reached
                    depth = this.placeEl.parents(opt.listNodeName).length;
                    if (depth + this.dragDepth <= opt.maxDepth) {
                        // create new sub-level if one doesn't exist
                        if (!list.length) {
                            list = $('<' + opt.listNodeName + '/>').addClass(opt.listClass);
                            list.append(this.placeEl);
                            prev.append(list);
                            this.setParent(prev);
                        } else {
                            // else append to next level up
                            list = prev.children(opt.listNodeName + ':last');
                            list.append(this.placeEl);
                        }
                    }
                }
                // decrease horizontal level
                if (mouse.distX < 0) {
                    // we can't decrease a level if an item preceeds the current one
                    next = this.placeEl.next(opt.itemNodeName);
                    if (!next.length) {
                        parent = this.placeEl.parent();
                        this.placeEl.parents(opt.itemNodeName + ':first').after(this.placeEl);
                        if (!parent.children().length) {
                            this.unsetParent(parent.parent());
                        }
                    }
                }
            }

var isEmpty = false;

// find list item under cursor
            if (!hasPointerEvents) {
                this.dragEl[0].style.visibility = 'hidden';
            }
            this.pointEl = $(document.elementFromPoint(e.pageX - this.w.scrollLeft(), e.pageY - this.w.scrollTop()));
            if (!hasPointerEvents) {
                this.dragEl[0].style.visibility = 'visible';
            }
            if (this.pointEl.hasClass(opt.handleClass)) {
                this.pointEl = this.pointEl.parent(opt.itemNodeName);
            }
            if (this.pointEl.hasClass(opt.emptyClass)) {
                isEmpty = true;
            }
            else if (!this.pointEl.length || !this.pointEl.hasClass(opt.itemClass)) {
                return;
            }

// find parent list of item under cursor
            var pointElRoot = this.pointEl.parents('.' + opt.rootClass + ':first'),
                isNewRoot   = this.dragRootEl.data('nestable-id') !== pointElRoot.data('nestable-id');

/**
             * move vertical
             */
            if (!mouse.dirAx || isNewRoot || isEmpty) {
                // check if groups match if dragging over new root
                if (isNewRoot && opt.group !== pointElRoot.data('nestable-group')) {
                    return;
                }
                // check depth limit
                depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;
                if (depth > opt.maxDepth) {
                    return;
                }
                var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);
                    parent = this.placeEl.parent();
                // if empty create new list to replace empty placeholder
                if (isEmpty) {
                    list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);
                    list.append(this.placeEl);
                    this.pointEl.replaceWith(list);
                }
                else if (before) {
                    this.pointEl.before(this.placeEl);
                }
                else {
                    this.pointEl.after(this.placeEl);
                }
                if (!parent.children().length) {
                    this.unsetParent(parent.parent());
                }
                if (!this.dragRootEl.find(opt.itemNodeName).length) {
                    this.dragRootEl.append('<div class="' + opt.emptyClass + '"/>');
                }
                // parent root list has changed
                if (isNewRoot) {
                    this.hasNewRoot = true;
                    this.dragRootEl = pointElRoot;
                }
            }
        }

};

$.fn.nestable = function(params)
    {
        var lists  = this,
            retval = this;

lists.each(function()
        {
            var plugin = $.data(this, 'nestable');
            if (!plugin) {
                $.data(this, 'nestable', new Plugin(this, params));
                $.data(this, 'nestable-id', new Date().getTime());
            } else {
                if (typeof params === 'string' && typeof plugin[params] === 'function') {
                    retval = plugin[params]();
                }
            }
        });

return retval || lists;
    };

})(jQuery, window, document);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

;(function($, window, document, undefined)

{

var hasTouch = 'ontouchstart' in window;

/**

* Detect CSS pointer-events property

* events are normally disabled on the dragging element to avoid conflicts

* https://github.com/ausi/Feature-detection-technique-for-pointer-events/blob/master/modernizr-pointerevents.js

var hasPointerEvents = (function()

{

var el = document.createElement('div'),

docEl = document.documentElement;

if (!('pointerEvents' in el.style)) {

return false;

}

el.style.pointerEvents = 'auto';

el.style.pointerEvents = 'x';

docEl.appendChild(el);

var supports = window.getComputedStyle && window.getComputedStyle(el, '').pointerEvents === 'auto';

docEl.removeChild(el);

return !!supports;

})();

var eStart = hasTouch ? 'touchstart' : 'mousedown',

eMove = hasTouch ? 'touchmove' : 'mousemove',

eEnd = hasTouch ? 'touchend' : 'mouseup';

eCancel = hasTouch ? 'touchcancel' : 'mouseup';

var defaults = {

listNodeName : 'ol',

itemNodeName : 'li',

rootClass : 'dd',

listClass : 'dd-list',

itemClass : 'dd-item',

dragClass : 'dd-dragel',

handleClass : 'dd-handle',

collapsedClass : 'dd-collapsed',

placeClass : 'dd-placeholder',

emptyClass : 'dd-empty',

expandBtnHTML : '<button data-action="expand">Expand</button>',

collapseBtnHTML : '<button data-action="collapse">Collapse</button>',

group : 0,

maxDepth : 20,

threshold : 20

};

function Plugin(element, options)

{

this.w = $(window);

this.el = $(element);

this.options = $.extend({}, defaults, options);

this.init();

}

Plugin.prototype = {

init: function()

{

var list = this;

list.reset();

list.el.data('nestable-group', this.options.group);

list.placeEl = $('<div class="' + list.options.placeClass + '"/>');

$.each(this.el.find(list.options.itemNodeName), function(k, el) {

list.setParent($(el));

});

list.el.on('click', 'button', function(e) {

if (list.dragEl || (!hasTouch && e.button !== 0)) {

return;

}

var target = $(e.currentTarget),

action = target.data('action'),

item = target.parent(list.options.itemNodeName);

if (action === 'collapse') {

list.collapseItem(item);

}

if (action === 'expand') {

list.expandItem(item);

}

});

var onStartEvent = function(e)

{

var handle = $(e.target);

if (!handle.hasClass(list.options.handleClass)) {

handle = handle.parents('.' + list.options.handleClass + ':first');

}

if (!handle.length || list.dragEl || (!hasTouch && e.button !== 0) || (hasTouch && e.touches.length !== 1)) {

return;

}

e.preventDefault();

list.dragStart(hasTouch ? e.touches[0] : e);

};

var onMoveEvent = function(e)

{

if (list.dragEl) {

e.preventDefault();

list.dragMove(hasTouch ? e.touches[0] : e);

}

};

var onEndEvent = function(e)

{

if (list.dragEl) {

e.preventDefault();

list.dragStop(hasTouch ? e.touches[0] : e);

}

};

if (hasTouch) {

list.el[0].addEventListener(eStart, onStartEvent, false);

window.addEventListener(eMove, onMoveEvent, false);

window.addEventListener(eEnd, onEndEvent, false);

window.addEventListener(eCancel, onEndEvent, false);

} else {

list.el.on(eStart, onStartEvent);

list.w.on(eMove, onMoveEvent);

list.w.on(eEnd, onEndEvent);

}

serialize: function()

{

var data,

depth = 0,

list = this;

step = function(level, depth)

{

var array = [ ],

items = level.children(list.options.itemNodeName);

items.each(function()

{

var li = $(this),

item = $.extend({}, li.data()),

sub = li.children(list.options.listNodeName);

if (sub.length) {

item.children = step(sub, depth + 1);

}

array.push(item);

});

return array;

};

data = step(list.el.find(list.options.listNodeName + ':first'), depth);

return data;

serialise: function()

{

return this.serialize();

reset: function()

{

this.mouse = {

offsetX : 0,

offsetY : 0,

startX : 0,

startY : 0,

lastX : 0,

lastY : 0,

nowX : 0,

nowY : 0,

distX : 0,

distY : 0,

dirAx : 0,

dirX : 0,

dirY : 0,

lastDirX : 0,

lastDirY : 0,

distAxX : 0,

distAxY : 0

};

this.moving = false;

this.dragEl = null;

this.dragRootEl = null;

this.dragDepth = 0;

this.hasNewRoot = false;

this.pointEl = null;

expandItem: function(li)

{

li.removeClass(this.options.collapsedClass);

li.children('[data-action="expand"]').hide();

li.children('[data-action="collapse"]').show();

li.children(this.options.listNodeName).show();

collapseItem: function(li)

{

var lists = li.children(this.options.listNodeName);

if (lists.length) {

li.addClass(this.options.collapsedClass);

li.children('[data-action="collapse"]').hide();

li.children('[data-action="expand"]').show();

li.children(this.options.listNodeName).hide();

}

expandAll: function()

{

var list = this;

list.el.find(list.options.itemNodeName).each(function() {

list.expandItem($(this));

});

collapseAll: function()

{

var list = this;

list.el.find(list.options.itemNodeName).each(function() {

list.collapseItem($(this));

});

setParent: function(li)

{

if (li.children(this.options.listNodeName).length) {

li.prepend($(this.options.expandBtnHTML));

li.prepend($(this.options.collapseBtnHTML));

}

li.children('[data-action="expand"]').hide();

unsetParent: function(li)

{

li.removeClass(this.options.collapsedClass);

li.children('[data-action]').remove();

li.children(this.options.listNodeName).remove();

dragStart: function(e)

{

var mouse = this.mouse,

target = $(e.target),

dragItem = target.parents(this.options.itemNodeName + ':first');

this.placeEl.css('height', dragItem.height());

mouse.offsetX = e.offsetX !== undefined ? e.offsetX : e.pageX - target.offset().left;

mouse.offsetY = e.offsetY !== undefined ? e.offsetY : e.pageY - target.offset().top;

mouse.startX = mouse.lastX = e.pageX;

mouse.startY = mouse.lastY = e.pageY;

this.dragRootEl = this.el;

this.dragEl = $(document.createElement(this.options.listNodeName)).addClass(this.options.listClass + ' ' + this.options.dragClass);

this.dragEl.css('width', dragItem.width());

dragItem.replaceWith(this.placeEl).appendTo(this.dragEl);

$(document.body).append(this.dragEl);

this.dragEl.css({

'left' : e.pageX - mouse.offsetX,

'top' : e.pageY - mouse.offsetY

});

// total depth of dragging item

var i, depth,

items = this.dragEl.find(this.options.itemNodeName);

for (i = 0; i < items.length; i++) {

depth = $(items[i]).parents(this.options.listNodeName).length;

if (depth > this.dragDepth) {

this.dragDepth = depth;

}

dragStop: function(e)

{

this.placeEl.replaceWith(this.dragEl.html());

this.dragEl.remove();

this.el.trigger('change');

if (this.hasNewRoot) {

this.dragRootEl.trigger('change');

}

this.reset();

dragMove: function(e)

{

var list, parent, prev, next, depth,

opt = this.options,

mouse = this.mouse;

this.dragEl.css({

'left' : e.pageX - mouse.offsetX,

'top' : e.pageY - mouse.offsetY

});

// mouse position last events

mouse.lastX = mouse.nowX;

mouse.lastY = mouse.nowY;

// mouse position this events

mouse.nowX = e.pageX;

mouse.nowY = e.pageY;

// distance mouse moved between events

mouse.distX = mouse.nowX - mouse.lastX;

mouse.distY = mouse.nowY - mouse.lastY;

// direction mouse was moving

mouse.lastDirX = mouse.dirX;

mouse.lastDirY = mouse.dirY;

// direction mouse is now moving (on both axis)

mouse.dirX = mouse.distX === 0 ? 0 : mouse.distX > 0 ? 1 : -1;

mouse.dirY = mouse.distY === 0 ? 0 : mouse.distY > 0 ? 1 : -1;

// axis mouse is now moving on

var newAx = Math.abs(mouse.distX) > Math.abs(mouse.distY) ? 1 : 0;

// do nothing on first move

if (!mouse.moving) {

mouse.dirAx = newAx;

mouse.moving = true;

return;

}

// calc distance moved on this axis (and direction)

if (mouse.dirAx !== newAx) {

mouse.distAxX = 0;

mouse.distAxY = 0;

} else {

mouse.distAxX += Math.abs(mouse.distX);

if (mouse.dirX !== 0 && mouse.dirX !== mouse.lastDirX) {

mouse.distAxX = 0;

}

mouse.distAxY += Math.abs(mouse.distY);

if (mouse.dirY !== 0 && mouse.dirY !== mouse.lastDirY) {

mouse.distAxY = 0;

}

mouse.dirAx = newAx;

/**

* move horizontal

if (mouse.dirAx && mouse.distAxX >= opt.threshold) {

// reset move distance on x-axis for new phase

mouse.distAxX = 0;

prev = this.placeEl.prev(opt.itemNodeName);

// increase horizontal level if previous sibling exists and is not collapsed

if (mouse.distX > 0 && prev.length && !prev.hasClass(opt.collapsedClass)) {

// cannot increase level when item above is collapsed

list = prev.find(opt.listNodeName + ':last');

// check if depth limit has reached

depth = this.placeEl.parents(opt.listNodeName).length;

if (depth + this.dragDepth <= opt.maxDepth) {

// create new sub-level if one doesn't exist

if (!list.length) {

list = $('<' + opt.listNodeName + '/>').addClass(opt.listClass);

list.append(this.placeEl);

prev.append(list);

this.setParent(prev);

} else {

// else append to next level up

list = prev.children(opt.listNodeName + ':last');

list.append(this.placeEl);

}

// decrease horizontal level

if (mouse.distX < 0) {

// we can't decrease a level if an item preceeds the current one

next = this.placeEl.next(opt.itemNodeName);

if (!next.length) {

parent = this.placeEl.parent();

this.placeEl.parents(opt.itemNodeName + ':first').after(this.placeEl);

if (!parent.children().length) {

this.unsetParent(parent.parent());

}

var isEmpty = false;

// find list item under cursor

if (!hasPointerEvents) {

this.dragEl[0].style.visibility = 'hidden';

}

this.pointEl = $(document.elementFromPoint(e.pageX - this.w.scrollLeft(), e.pageY - this.w.scrollTop()));

if (!hasPointerEvents) {

this.dragEl[0].style.visibility = 'visible';

}

if (this.pointEl.hasClass(opt.handleClass)) {

this.pointEl = this.pointEl.parent(opt.itemNodeName);

}

if (this.pointEl.hasClass(opt.emptyClass)) {

isEmpty = true;

}

else if (!this.pointEl.length || !this.pointEl.hasClass(opt.itemClass)) {

return;

}

// find parent list of item under cursor

var pointElRoot = this.pointEl.parents('.' + opt.rootClass + ':first'),

isNewRoot = this.dragRootEl.data('nestable-id') !== pointElRoot.data('nestable-id');

/**

* move vertical

if (!mouse.dirAx || isNewRoot || isEmpty) {

// check if groups match if dragging over new root

if (isNewRoot && opt.group !== pointElRoot.data('nestable-group')) {

return;

}

// check depth limit

depth = this.dragDepth - 1 + this.pointEl.parents(opt.listNodeName).length;

if (depth > opt.maxDepth) {

return;

}

var before = e.pageY < (this.pointEl.offset().top + this.pointEl.height() / 2);

parent = this.placeEl.parent();

// if empty create new list to replace empty placeholder

if (isEmpty) {

list = $(document.createElement(opt.listNodeName)).addClass(opt.listClass);

list.append(this.placeEl);

this.pointEl.replaceWith(list);

}

else if (before) {

this.pointEl.before(this.placeEl);

}

else {

this.pointEl.after(this.placeEl);

}

if (!parent.children().length) {

this.unsetParent(parent.parent());

}

if (!this.dragRootEl.find(opt.itemNodeName).length) {

this.dragRootEl.append('<div class="' + opt.emptyClass + '"/>');

}

// parent root list has changed

if (isNewRoot) {

this.hasNewRoot = true;

this.dragRootEl = pointElRoot;

}

};

$.fn.nestable = function(params)

{

var lists = this,

retval = this;

lists.each(function()

{

var plugin = $.data(this, 'nestable');

if (!plugin) {

$.data(this, 'nestable', new Plugin(this, params));

$.data(this, 'nestable-id', new Date().getTime());

} else {

if (typeof params === 'string' && typeof plugin[params] === 'function') {

retval = plugin[params]();

}

});

return retval || lists;

};

})(jQuery, window, document);

functions.js (Create a Folder name ‘js’ e.g. js/functions.js)

function menu_updatesort(jsonstring) {
	mittXHRobjekt = lagXHRobjekt();

if (mittXHRobjekt) {
		mittXHRobjekt.onreadystatechange = function() { 
			if(ajaxRequest.readyState == 4){
				var ajaxDisplay = document.getElementById('sortDBfeedback');
				ajaxDisplay.innerHTML = ajaxRequest.responseText;
			} else {
				// Uncomment this an refer it to a image if you want the loading gif
				//document.getElementById('sortDBfeedback').innerHTML = "<img style='height:11px;' src='images/ajax-loader.gif' alt='ajax-loader' />";
			}
		}
		
		ajaxRequest.open("GET", "menuSortableSave.php?jsonstring=" + jsonstring + "&rand=" + Math.random()*9999, true);
		ajaxRequest.send(null); 
	}
}

function lagXHRobjekt() {

var XHRobjekt = null;

try {

ajaxRequest = new XMLHttpRequest(); // Firefox, Opera, ...

} catch(err1) {

try {

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); // Noen IE v.

} catch(err2) {

try {

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); // Noen IE v.

} catch(err3) {

ajaxRequest = false;

}

return ajaxRequest;

}

function menu_updatesort(jsonstring) {

mittXHRobjekt = lagXHRobjekt();

if (mittXHRobjekt) {

mittXHRobjekt.onreadystatechange = function() {

if(ajaxRequest.readyState == 4){

var ajaxDisplay = document.getElementById('sortDBfeedback');

ajaxDisplay.innerHTML = ajaxRequest.responseText;

} else {

// Uncomment this an refer it to a image if you want the loading gif

//document.getElementById('sortDBfeedback').innerHTML = "<img style='height:11px;' src='images/ajax-loader.gif' alt='ajax-loader' />";

}

ajaxRequest.open("GET", "menuSortableSave.php?jsonstring=" + jsonstring + "&rand=" + Math.random()*9999, true);

ajaxRequest.send(null);

}

menuSortableSave.php

<?php

// Connect to DB
	include("conn.php");
	
	
	
	
	
	// Get the JSON string
	$jsonstring = $_GET['jsonstring'];
	
	// Decode it into an array
	$jsonDecoded = json_decode($jsonstring, true, 64);

/* Function to parse the multidimentional array into a more readable array 
	 * Got help from stackoverflow with this one:
	 *    http://stackoverflow.com/questions/11357981/save-json-or-multidimentional-array-to-db-flat?answertab=active#tab-top
	*/
	function parseJsonArray($jsonArray, $parentID = 0)
	{
		include("conn.php");
	  $return = array();
	  foreach ($jsonArray as $subArray) {
		 $returnSubSubArray = array();
		 if (isset($subArray['children'])) {
		   $returnSubSubArray = parseJsonArray($subArray['children'], $subArray['id']);
		 }
		 $return[] = array('id' => $subArray['id'], 'parentID' => $parentID);
		 $return = array_merge($return, $returnSubSubArray);
	  }

return $return;
	}
	
	
	
	
	// Dump the array to debug
	//var_dump(parseJsonArray($jsonDecoded));
	
	
	
	
	
	
	
	// Run the function above
	$readbleArray = parseJsonArray($jsonDecoded);
	
	
	
	// Loop through the "readable" array and save changes to DB
	foreach ($readbleArray as $key => $value) {
	include("conn.php");
		// $value should always be an array, but we do a check
		if (is_array($value)) {
		
			// Update DB
			
			
			$result=$db->query("UPDATE category SET 
									rang='". $key ."', 
									parent='".$value['parentID']."' 
									WHERE id='".$value['id']."'")
			
			
			or die(mysql_error());
		}
	}
	
	
	// Echo status message for the update
	//echo "The list was updated ".date("y-m-d H:i:s")."!";
	
?>

<?php

// Connect to DB

include("conn.php");

// Get the JSON string

$jsonstring = $_GET['jsonstring'];

// Decode it into an array

$jsonDecoded = json_decode($jsonstring, true, 64);

/* Function to parse the multidimentional array into a more readable array

* Got help from stackoverflow with this one:

* http://stackoverflow.com/questions/11357981/save-json-or-multidimentional-array-to-db-flat?answertab=active#tab-top

function parseJsonArray($jsonArray, $parentID = 0)

{

include("conn.php");

$return = array();

foreach ($jsonArray as $subArray) {

$returnSubSubArray = array();

if (isset($subArray['children'])) {

$returnSubSubArray = parseJsonArray($subArray['children'], $subArray['id']);

}

$return[] = array('id' => $subArray['id'], 'parentID' => $parentID);

$return = array_merge($return, $returnSubSubArray);

}

return $return;

}

// Dump the array to debug

//var_dump(parseJsonArray($jsonDecoded));

// Run the function above

$readbleArray = parseJsonArray($jsonDecoded);

// Loop through the "readable" array and save changes to DB

foreach ($readbleArray as $key => $value) {

include("conn.php");

// $value should always be an array, but we do a check

if (is_array($value)) {

// Update DB

$result=$db->query("UPDATE category SET

rang='". $key ."',

parent='".$value['parentID']."'

WHERE id='".$value['id']."'")

or die(mysql_error());

}

// Echo status message for the update

//echo "The list was updated ".date("y-m-d H:i:s")."!";

Leave a Reply Cancel reply