jQuery Clone for showing single image

Question

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 appended to it. As I'm showing the total count on drag images.

My benchmark is Picasa Web Albums.

Answer 1

I'm not entirely sure what the name of the class that is applied to items as they are dragged, but I believe it is ui-draggable-dragging but you could do something like the following for the start event of the drag.

$(".ui-draggable-dragging:gt(0)").hide();

This will hide all but the first item. When the drag stop event is fired you should just be able to unhide them again by calling show() instead of hide() and replacing .ui-draggable-dragging by another class they have in common.

Answer 2

Hi Riviera, Thanks for replying.

Your assumption is correct, but i tried in my code, still no luck . My code looks like this :

css:

.dragproxy { position: absolute; max-width: 300px; }

.dragproxy .item { list-style: none; float: left; }

.dragproxy img { position: relative; left: 5px; background-color: gray !important; }

.drag_image_opacity{ opacity: 0.5; }

JS Code :

    bindDragEvents: function() {
        var that = this;
        var container = $('#sortable');
        var photo_length = 0;
        var containerRegion = {
          top: container.offset().top,
          bottom:  container.offset().top + container.height()
        };

        $(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.addClass('drag_image_opacity');
                return proxy;
            })

please help me, i'm newbie to jQuery

thanks, sri...