Page 1 of 1

[56K warn] jQuery Clone

Posted: Fri Nov 20, 2009 7:33 am
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.

Re: [56K warn] jQuery Clone

Posted: Fri Nov 20, 2009 11:20 am
by pickle
You want us to debug an entire jQuery plugin?

Re: [56K warn] jQuery Clone

Posted: Mon Nov 23, 2009 4:24 am
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...

Re: [56K warn] jQuery Clone

Posted: Mon Nov 23, 2009 5:40 am
by kaszu
Line 142, instead of all selected images add to proxy only one.

Re: [56K warn] jQuery Clone

Posted: Mon Nov 23, 2009 8:18 am
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.