3 columns drag/drop blocks not persistent within same column

[glennn.php]

regarding this script: http://cssphpmysql.com/dev/my-lifeline/

 

this is a script for shuffling these blocks like on iGoogle fires a few php/mysql UPDATE queries whenever a block is dragged/dropped from column to column, but fails to fire the queries if a block is dragged to a dif. position within the same column - i'm failry noob with jquery/javascript and after a lot of hunting and pecking i'm unable to find why.

 

here's a bit of the code which i think is pertinent, though not sure. i would be very grateful if someone could offer a little help? i can post more code if this doesn't tell much...

 

Portal.prototype = {

initialize : function (settings, options, data) {

	// set options
	this.setOptions(options);

	// set blocks to their positions
	this.apply_settings(settings);

	// load data to blocks
	//this.loadData(data);

	// if editor is enabled we proceed
	if (!this.options.editorEnabled) return;

	// get all available columns
	var columns = $(this.options.portal).getElementsByClassName(this.options.column);

	// loop through columns array
	$A(columns).each(function(column) {

		// create sortable
		Sortable.create(column, {
			containment : $A(columns),
			constraint  : this.options.constraint,
			ghosting	: this.options.ghosting,
			tag 		: this.options.tag,
			only 		: this.options.block,
			dropOnEmpty : this.options.droponempty,
			handle 		: this.options.handle,
			hoverclass 	: this.options.hoverclass,
			scroll		: this.options.scroll,
			onUpdate 	: function (container) {

				// if we dont have a save url we dont update
				if (!this.options.saveurl) return;

				// if we are in the same container we do nothing
			    if (container.id == this.options.blocklist) return;

				// get blocks in this container
				var blocks = container.getElementsByClassName(this.options.block);

				// serialize all blocks in this container
				var postBody = container.id + ':';
				postBody += $A(blocks).pluck('id').join(',');
				postBody = 'value=' + escape(postBody);

				// save it to the database
				new Ajax.Request(this.options.saveurl, { method: 'post', postBody: postBody, onComplete : function (t) {
					$('data').update(t.responseText + $('data').innerHTML);
				} });

			}.bind(this)
		});

	}.bind(this));
},

apply_settings : function (settings) {
	// apply settings to the array
	for (var container in settings) {
		settings[container].each(function (block) { if (!$(container)) { console.log('Block '+container+' not found') } else { $(container).appendChild($(block)); }  });
	}
},

setOptions : function (options) {
	// set options
	this.options = {
		tag				: 'div',
		editorEnabled 	: false,
		portal			: 'portal',
		column			: 'column',
		block			: 'block',
		blocks			: 'blocks',
		content			: 'content',
		configElement	: 'config',
		configSave		: 'save-button',
		configCancel	: 'cancel-button',
		configSaved		: 'config-saved',
		handle			: 'draghandle',
		hoverclass		: 'target',
		scroll			: window,
		remove			: 'option-remove',
		config			: 'option-edit',
		blocklist		: 'portal-column-block-list',
		saveurl			: true,
		constraint		: false,
		ghosting		: false,
		droponempty		: true
	}

	Object.extend(this.options, options || {});
},

 

 

the HTML:

 

<div id="columns">

			<div id="column-1" class="column menu"></div>

			<div id="column-2" class="column blocks"></div>

			<div id="column-3" class="column sidebar"></div>

<div class="portal-column" id="portal-column-block-list" style="display: none;">

// example block
<div class="block" id="block-1">
<h1 class="draghandle"><span id="title-1" class="editText">1977</span></h1>
<p><span id="evnt-1" class="editText">Berry Academy</span></p>
</div>
                    
</div>
</div>

 

i've attached a dragdrop.js file as a txt file.

 

I'll be very grateful for any offer of help. thanks loads.

 

GN

17687_.txt

[S3cr3t]

Did you define the saveUrl ?

 

saveurl : true,

 

Should be a valid .php file that accepts the request.

[glennn.php]

yes, it's actually defined in the index.php file:

 

	<script type="text/javascript">
		var settings 	= {<?=getBlocks()?>};

		var options 	= { 
		portal 			: 'columns', 
		editorEnabled 	: true, 
		saveurl 		: 'save.php' };
		var data 		= {};

		var portal;

		Event.observe(window, 'load', function() {
			portal = new Portal(settings, options, data);
		});
	</script>

 

remember, what's happening is that the script performs properly when a block is moved from column to column, only not when a block is moved WITHIN the column.

 

i REALLY appreciate your help. and i'm glad to show you more of the js if necessary...

[S3cr3t]

Unfortunately I don't know that script.

 

Got something in the JS error console ?

PHP errors ?

 

Tried do compare your script with that one in the demo ?

[glennn.php]

oh, by being persistent, what i mean is that it writes to the database - if you drag a block to another column and refresh your page, it's persistent - if you drag a block within its own column to a different position it won't write to the database, and when you refresh the page it's back to where it was.

 

if you drag a block from one column to the another and then BACK to its orig. column in a different position it will have written to the db both times and it's all good...

[glennn.php]

Unfortunately I don't know that script.

 

Got something in the JS error console ?

PHP errors ?

 

Tried do compare your script with that one in the demo ?

 

the link (demo) i sent you is my script - i hardly modified the js at all, but the original script doesn't work right, either.

 

can i send you the original? it's really small - i'd even be glad to make a nice donation if you could improve this particular 'bug'...

[glennn.php]

i've attached the original script for anyone who'd care to take a peek. donations pending... : )

17689_.zip

[S3cr3t]

Well this script isn't really supposed to update boxes in same container...

[glennn.php]

can it not be made to do so? i'm paying...

[glennn.php]

Well this script isn't really supposed to update boxes in same container...

 

feel free to PM me if it's something you'd consider "arranging"...

[S3cr3t]

Or you just drag them first to the left / right and then in the middle. 

[glennn.php]

Or you just drag them first to the left / right and then in the middle. 

Or you just drag them first to the left / right and then in the middle. 

 

yes, well that's exactly what i'm trying to NOT have to do. thanks, tho.