...

View Full Version : 3 columns drag/drop blocks not persistent within same column



glenn.php
03-03-2012, 02:40 PM
regarding this script: http://cssphpmysql.com/dev/my-lifeline/

this is a jsportal 2.0 script written by Michel Hiemstra (http://michelhiemstra.nl); this script 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 in 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?




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 || {});
},



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 the dragdrop.js file as a txt file, also, as it's so large.

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

GN



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum