Binden Sie zwei Bilder zusammen, um gezogen zu werden

Question

Ich suche nach Hilfe mit einem Skript, um zwei Bilder gleichzeitig zu ziehen. Ich habe derzeit ein Skript, mit dem ich Miniaturbilder in einen Sammelbehälter ziehen kann, um sie später zu speichern. Einige meiner Thumbnails haben jedoch ein Bild darüber, um diese Thumbnail-Bilder als "unbekannte" Pflanzen darzustellen. Ich habe mich gefragt, ob mir jemand in die richtige Richtung zeigen könnte, wie ich diese beiden Bilder verbinden würde, um sie zu ziehen. Hier ist mein 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, 
}); 

});

Jede Hilfe würde sehr geschätzt werden. Vielen Dank.

EDIT: Website

Answer 1

Sie können die aktuellen ziehbaren Elemente mit einem Container umgeben, der anstatt der vorherigen ziehbar ist.

<div class=".container"> 
    <div class=".selector">...</div> 
    <div class=".plant_Unknown">...</div> 
</div> 

Und dann ersetzen Sie ziehbar Anrufe mit:

$(".container").draggable({ 
    helper: "clone", 
    revert: "invalid", 
    revertDuration: 700, 
    opacity: 0.75, 
}); 

PS: Nachdem die Website zu sehen, können Sie auch Ihr Link-Tag als den empfohlenen Behälter betrachten.

Answer 2

Sie können möglicherweise ein Objekt (Funktion oder variabel), die beiden Elemente enthalten, erstellen, zieht dann das Objekt.