Come posso testare se un oggetto si trova all'interno di un altro usando Jquery? - jquery

Senza usare i plug-in, come dovrei controllare se un elemento si trova all'interno di un altro? Ho provato a usare
element.hover();
ma senza successo. È possibile con JQuery puro o dovrei cercare una soluzione alternativa?

Il codice attualmente sembra

$(document).ready(function(){
$(".element_to_drag").mousedown(function(){
$(this).addClass("dragging");
$(".dragging").live("mousemove", function(e) {
var offset = $("#container").offset();
var x = offset.left;
var y = offset.top;
$(this).css("position", "absolute");
$(this).css("left", e.pageX - x);
$(this).css("top", e.pageY - y);
})
$(".dragging").live("mouseup", function(e)
{
$(this).removeClass("dragging");
})
$("#elementContainer").hover(function()
{
$(".dragging").css("background-color", "red");
});
});
});

Sto ancora imparando, mi sento libero di criticare qualsiasi cosa.

risposte:

Aggiorna la tua funzione mousemove per contenere questo invece:

$(this).css("position", "absolute");
$(this).css("left", e.pageX - $(this).width()/2);
$(this).css("top", e.pageY - $(this).height()/2);

$(this) si riferisce al tuo oggetto trascinabile. Quindi tutto quello che devi fare per vedere se l'oggetto trascinabile è contenuto nel #container è se un'istruzione if che controlla se $ (this) .css ("left") è maggiore della posizione X (non offset: vedi http://api.jquery.com/position/) del contenitore.

Ovviamente potresti voler fare anche dei controlli per vedere la larghezza dell'elemento trascinabile e assicurarti che si trovi interamente all'interno del contenitore.