[56K warn] jQuery Clone

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
srinathbtech
Forum Newbie
Posts: 6
Joined: Mon Nov 16, 2009 12:42 pm

[56K warn] jQuery Clone

Post by srinathbtech »

pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Hi,

If we select multiple images, how can we show only single image when we are dragging.?
when i tried to drag, it was showing all the three selected images append to it .
As I'm showing the total count on drag images .Using jQuery library.

Please refer the screeshots/attachments for reference.

js code:

Code: Select all

 
jQuery(function($) {
    window.SelectionModel = function(selector) {
        this.mostRecentSelection = null;
        this.selector = selector;
        var that = this;
        that.clearSelection();
 
        $(selector).live('mousedown', function(event) {
            that.handleSelectionEvent($(this), event);                
            
        // function to disable image border color when clicked on non-image region
            $('#sortable').click(function(e){
                if(e.target.id == "sortable"){
                    that.clearSelection();
                }
            });
            return false;
        });
        
    }
    
    
    SelectionModel.prototype = {
        handleSelectionEvent: function(clicked, event) {
            var ctrl = event.ctrlKey || event.metaKey; // Detect metaKey for OSX users
            
            if(event.shiftKey) {
                var selectable = $(this.selector)
                var previousSelectionIndex = selectable.index(this.mostRecentSelection || clicked);
                var currentSelectionIndex = selectable.index(clicked);
                var rangeMax = Math.max(previousSelectionIndex, currentSelectionIndex);
                var rangeMin = Math.min(previousSelectionIndex, currentSelectionIndex);
                            
                for (; rangeMin <= rangeMax; rangeMin++) {
                    if($(this.currentSelection).index(selectable[rangeMin]) != -1) continue;
                    $(selectable[rangeMin]).addClass('activated');
                    this.addToSelection(selectable[rangeMin]);
                }
            }
            else if(clicked.is('.activated')) {
                if(ctrl) {
                    this.removeFromSelection(clicked[0]);     
                    clicked.toggleClass('activated');                
                }
            }
            else {
                if(ctrl) {
                    this.addToSelection(clicked[0]);     
                }
                else {
                    this.clearSelection();
                    this.addToSelection(clicked[0])
                }
                clicked.toggleClass('activated');                
            }        
            this.mostRecentSelection = clicked;
        }
        ,addToSelection: function(element) {
            this.currentSelection.push(element);
        },
        removeFromSelection: function(element) {
            var newSelection = [];
            $(this.currentSelection).each(function(which, item) {
                if(item != element) newSelection.push(item); 
            });
            this.currentSelection = $(newSelection);
        },
        clearSelection: function() {
            $(this.selector).removeClass('activated');
            this.currentSelection = [];
        }
    };
    
    window.MultiSort = function(selectionModel, selector) {
        this.selectionModel = selectionModel;
        this.selector = selector;
        this.bindDragEvents();
        var that = this;
    }
    
    MultiSort.prototype = {
        relocateTargets: function() {
            $.event.special.drop.data = [];
            $.event.special.drop.$targets.filter( $.event.special.drop.filter ).each(function(){ 
                // locate and store the filtered drop targets
                $.event.special.drop.data[ $.event.special.drop.data.length ] = $.event.special.drop.locate( this ); 
            });
        }
        ,bindDragEvents: function() {
            var that = this;
            var container = $('#sortable');
            var photo_length = 0;
            var containerRegion = {
              top: container.offset().top,
              bottom:  container.offset().top + container.height()
            };
            $('[id^=category]')
                .unbind('dropstart drop dropend')
                .bind('dropstart', function(event) {
                    $(event.dropTarget).addClass('target');
                })
                .bind('drop', function(event) {
                    var target = $(event.dropTarget);
                    var photoIds = [];
                    $(photoSelector.currentSelection).each(function(which, photo) {
                        photoIds.push($(photo).attr('id').match(/[\d]+/)[0]);
                    });
                    photo_length = photoIds.length;
                    $(event.dragProxy).remove();
                    $.ajax({
                        type: 'post',
                        url: 'updatecat.php',
                        data: {
                            data: photoIds.join(), 
                            category_id: target.attr('id')
                        },
                        success: function() {
                            $(photoSelector.currentSelection).each(function(which, item) {
 //                             if ($(".album_select[album_selected='true']").get(0).parentNode.parentNode.id != target.attr('id')) {
                                    $(item).fadeOut("fast", function() {
                                        $(this).remove();
                                    });
 //                             }
                            });
                            
                            var target_album_id = target.attr('id').split('_');
                            update_album_count(current_album_id, target_album_id[1], photo_length);
                        }
                    })
                })
                .bind('dropend', function(event) {
                    $(event.dropTarget).removeClass('target');
                });
            
            $(this.selector)
                .unbind('dropstart drop dropend dragstart drag dragend')
                .bind('dragstart', function(event) {
                    that.relocateTargets();
                    var proxy = $('<div class="dragproxy"></div>');
                    var list = proxy;
                    $(that.selectionModel.currentSelection).map(function(which, photo) {
                        var clone = $(photo).clone();
                        clone.data('clonedFrom', $(photo));
                        list.append(clone);
                    });
                    // Show counter for multiple dragged items
                    if(that.selectionModel.currentSelection.length > 1) {
                        proxy.append("<div class='dragcount'>"+that.selectionModel.currentSelection.length+"</div>")
                    }
                    $(document.body).append(proxy);
                    list.css('opacity', 0.5);
                    return proxy;
                })
                .bind('drag', function(event) {
                    setTimeout(function() {
                        if(!event.dropTarget) return;
                        var target = $(event.dropTarget);
                        if(!target.is('.droptarget')) return;
                        if(event.pageX > target.offset().left + (target.width() / 2)) {
                            target.addClass('after');
                        }
                        else {
                            target.removeClass('after');
                        }
                    }, 50);
                    if(event.pageY < containerRegion.top) {
                        container.scrollTop(container.scrollTop() - 10);
                        that.relocateTargets();
                    }
                    if(event.pageY > containerRegion.bottom) {
                        container.scrollTop(container.scrollTop() + 10);
                        that.relocateTargets();
                    }
                    $( event.dragProxy ).css({ top:event.offsetY, left:event.offsetX });
                })
});
thanks,
sri...


pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.
Attachments
clone.png
clone.png (210.61 KiB) Viewed 1500 times
Last edited by pickle on Fri Nov 20, 2009 11:19 am, edited 1 time in total.
Reason: Added code tags & [56k warn] to subject due to the huge picture
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: [56K warn] jQuery Clone

Post by pickle »

You want us to debug an entire jQuery plugin?
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
srinathbtech
Forum Newbie
Posts: 6
Joined: Mon Nov 16, 2009 12:42 pm

Re: [56K warn] jQuery Clone

Post by srinathbtech »

Sorry if i'm wrong,

My idea is to get help from any of you by looking at the code.

Anyways, how can we show only one image dragging when multiple images are selected ??

Please help me .

thanx
sri...
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: [56K warn] jQuery Clone

Post by kaszu »

Line 142, instead of all selected images add to proxy only one.
srinathbtech
Forum Newbie
Posts: 6
Joined: Mon Nov 16, 2009 12:42 pm

Re: [56K warn] jQuery Clone

Post by srinathbtech »

hi kaszu,

Line 142 - $(that.selectionModel.currentSelection).map(function(which, photo) {

I wrote $($(that.selectionModel.currentSelection).get(0)).map(function(which, photo) {

This shows dragging of 1 image for multiple , but when drop the other images stay at their own positions instead of sorting .

could you please provide me some code on it, this will be a great helpfull to me .



thanks.
Post Reply