I'm looking for some help with a script to drag two images together at once. I currently have a script that allows me to drag thumbnail images into a collection bin to be saved later. However, some of my thumbnails have an image positioned over the top of them to represent these thumbnail images as "unknown" plants. I was wondering if someone could point me in the right direction as to how I would go about binding these two images together to be dragged. Here is my code:
$(document).ready(function() {
var limit = 16;
var counter = 0;
$("#mainBin1, #mainBin2, #mainBin3, #mainBin4, #mainBin5, #bin_One_Hd, #bin_Two_Hd, #bin_Three_Hd, #bin_Four_Hd, #bin_Five_Hd").droppable({
accept: ".selector, .plant_Unknown",
drop: function(event, ui) {
counter++;
if (counter == limit) {
$(this).droppable("disable");
}
$(this).append($(ui.draggable).clone());
$("#cbOptions").show();
$(".item").draggable({
containment: "parent",
grid: [72,72],
});
}
});
$(".selector").draggable({
helper: "clone",
revert: "invalid",
revertDuration: 700,
opacity: 0.75,
});
$(".plant_Unknown").draggable({
helper: "clone",
revert: "invalid",
revertDuration: 700,
opacity: 0.75,
});
});
Any help would be greatly appreciated. Thanks.
EDIT: Website
