Resizing and clone/copy sortables
Hello.
I got two types of connected lists: .productlisting_image & #sortable
When I drag an image from .productlisting_image to #sortable I need it to resize automatically from 150 x 150 px to 113 x 133 px. How do I accomplish that.
Secondly, how do I make a copy instead of moving the image from one list to another when dragging it?
I have tried to insert $(".sortableproduct").addClass('sortableitem'); as you can se below.
window.location.reload(); will reload everything but that does a refresh of the page. That is a hefty performance drain.
compare_fabrics.php does just save the sort order in a session so it will be remember when ever the visitor go to another page.
-
$(function() {
// Recieving box for dragged images.
$("#sortable").sortable({
connectWith: ['#sortable_header'],
// Save order of images when reciving an image.
receive: function(event, ui) {
save_sortables('1');
},
// Save order of images when removing an image.
remove: function(event, ui) {
save_sortables('2');
},
});
// Box that contains image we want to drag from to recieving box
$(".productlisting_image").sortable({
connectWith: ['#sortable']
});
// Trash can. When images are dropped here from recieving box we immediatly clear the box.
$("#sortable_header").sortable({
receive: function(event, ui) {
$("#sortable_header").html("")
}
});
// Here we save the image order. Use AJAX to call a PHP file that saves it in a session variable.
// On the HTML page there is a call to another PHP function that will retrieve order and populate recieving box
// when a visitor comes to the page.
function save_sortables(option) {
var posts = $('#sortable').sortable('serialize');
$.ajax({
type: "POST",
url: "compare_fabrics.php",
data: posts,
success: function(msg){
if(option==1) {
// We check if we need to resize image. Code incomplete...
//window.location.reload();
$(".sortableproduct").addClass('sortableitem');
}
}
});
};
});