Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    3 columns drag/drop blocks not persistent within same column

    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?

    Code:
    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:

    Code:
    <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
    Attached Files Attached Files


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •