[56K warn] jQuery Clone
Posted: Fri Nov 20, 2009 7:33 am
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:
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:
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:
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 });
})
});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: