我有一组div
个不同大小的同一个班级.gjg-item
。我有它,所以你可以将这些div
拖放到其他位置。
如何告诉jquery不仅缩小dragstart
上的图片,还要将其重新标记为revert
上的原始尺寸?
以下是我正在使用的代码:
$('.gjg-item').draggable({snap: true, snapMode: 'inner', revert: 'invalid'});
$('.gjg-item').droppable({accept: '.gjg-item', hoverClass: "ui-state-hover"});
$('.gjg-item').on('dragstart', function(event, ui) {
$(this).css('z-index', '9999999').width(50).height(50);
$(this).find('img').width(50).height(50);
});
$('.gjg-item').on("dropover", function(event, ui){
var draggingImgID = ui.draggable[0].id;
var hoverPositionSize = $(this).width();
if($(this).attr('data-pid') != draggingImgID) {
$(this).css('opacity', '.2');
}
});
$('.gjg-item').on("dropout", function(event, ui){
$(this).css('opacity', '1');
});
$('.gjg-item').on("drop", function(event, ui){
$('.gjg-item').draggable('destroy');
$('.gjg-item').droppable('destroy');
var idOfItemDropped = ui.draggable[0].id; // css id of item being dropped
idOfItemDropped = idOfItemDropped.replace('gjg-i-', ''); // parse the id
var droppedImgOldPosition = $('#gjg-i-'+idOfItemDropped).attr('data-position'); // get the image being dropped old position
var droppedImgNewPosition = $(this).attr('data-position'); // get the new position where the image was dropped
//console.log('hello');
$.post( DOMAIN+LIBRARY+"grid/ajax/ajax_dragndrop.php", { gridID: gridID, imageID: idOfItemDropped, oldPosition: droppedImgOldPosition, newPosition: droppedImgNewPosition}, function(data) {
if(data.code == 200) {
$('.gjg-item').remove();
ajaxArea('ni');
}
});
});
答案 0 :(得分:1)
您可以添加代码来调整dragstop
事件的图像大小,如下所示:
var original_height = 100;
var original_width = 100;
$('.gjg-item').on('dragstop', function(event, ui) {
$(this).css('z-index', '9999999').width(original_width).height(original_height);
$(this).find('img').width(original_width).height(original_height);
});